Stack Overflow
Stack Overflow

Questions tagged [grid-layout]

Grid layout is used to align content into columns and fields. Unlike table layouts, grids are composed of guide lines so that elements positioned relative to the grid can have drag and drop behavior.

GridLayout is similar by concept to the table layout, placing objects into multiple rows and columns so that all cells in the same column usually have the same width.

grid layout is a "CSS table" that allows to divide available space into columns and rows using a set of predictable sizing behaviors. Unlike HTML table, CSS grid layout is defined in CSS, placing HTML objects into the cells by id.

GridLayout supports cell padding and may have unspecified number of rows (there are enough rows to place all elements using the specified number of columns, new rows are added as required). It does not support cells spanning over multiple rows or columns (another layout, GridBagLayout does).

Resources

2180 questions
40
votes
2 answers

Is it possible to place more than one element into a CSS-Grid-Cell without overlapping?

I have three columns and one row and I want to place each grid-element into one of the three resulting cells. This is what I want, using three container-elements: main { display: grid; grid-template-columns: 33% 33% auto; grid-gap:…
asdfsolider
  • 503
  • 1
  • 4
  • 5
39
votes
7 answers

Grid Layout Vs. Table Layout

I am working on a booking engine android app like an airline booking system. To fetch the content of say all the available airlines specific to a passenger search, this is then displayed on the mobile's screen. Which one, a table layout or a grid…
learn_andrd
  • 1,046
  • 1
  • 12
  • 15
38
votes
6 answers

"Comparison method violates its general contract!" - TimSort and GridLayout

I made a color palette with a jPanel and a JLabel array in it. At first it worked well, but then i put some other jLabels out of the JPanel and added them some events. Now I keep getting this error: Exception in thread "AWT-EventQueue-0"…
s.alem
  • 12,579
  • 9
  • 44
  • 72
37
votes
6 answers

Change the order of col-*-12 columns in Bootstrap using push/pull

I have two columns of the same size (.col-xs-12) and I would change their place when the screen size correspond to that of a mobile device. I would place them in the reverse order. I have read that push and pull bootstrap directives help to…
Mazzy
  • 13,354
  • 43
  • 126
  • 207
36
votes
6 answers

Heterogeneous GridLayout

I am trying to implement the layout below: I guess GridLayout is suitable for my needs but after 2 hours of struggle I couldn't create even a similar layout.. The layout is resizing itself wrongly, it exceeds the screen of the phone and it also…
C.d.
  • 9,932
  • 6
  • 41
  • 51
34
votes
3 answers

Is there a RowSpan="All" in WPF?

I create a GridSplitter across the 3 rows that I have in my grid like this:
Chris Spicer
  • 2,144
  • 1
  • 13
  • 22
34
votes
6 answers

Set rowSpan or colSpan of a child of a GridLayout programmatically?

I have a GridLayout with 5 columns and 3 rows. Now I can insert arbitrary child views, which is great. Even better is, that I can assign columnSpan=2 to some item in order to span it to 2 columns (the same with rowSpan). The problem now is, that I…
The_Unknown
  • 988
  • 2
  • 11
  • 22
33
votes
3 answers

A way to count columns in a responsive grid

Although I have not yet been able to find an answer, the question is simple: Is there a way, other than brute force, to count the number of columns in a responsive grid? #grid-container { width: 100%; height: 85%; position: relative; …
oldboy
  • 5,729
  • 6
  • 38
  • 86
33
votes
8 answers

How to make a fixed column in CSS using CSS Grid Layout?

I've made a simple site with a #container div that is parent to two divs: #left and #right, by using Grid Layout: Is there any way to make the left column fixed? I'd like the left text to persist on its position, and the right text to be scrollable…
MeLlamoPablo
  • 416
  • 1
  • 6
  • 10
31
votes
2 answers

Grid layout on
... Bug on chrome?

From my decades-long experience of hand-coding HTMLs, I have learnt that
,
are just block-level elements like
. CSS-wise, they behave just the same in terms of positioning and sizing. (Please bear with me, I am ignoring old…
user2526586
  • 972
  • 2
  • 12
  • 27
31
votes
3 answers

min-width for column in Bootstrap grid system

I have following HTML with Bootstrap CSS.
Name
Instance name
Due…
sasha_trn
  • 1,935
  • 2
  • 23
  • 30
29
votes
3 answers

Qt Designer - How to get a widget to span columns?

I created a simple form. I added a PushButton in the bottom right, and then a TabWidget above that. I highlighted the main window, and chose Grid Layout. The PushButton was stretched, so I added a spacer to the left of it. Now, my Tab Widget only…
esac
  • 24,099
  • 38
  • 122
  • 179
29
votes
11 answers

Wanted: CSS grid system AND collapsing margins

I think this is a tough one. I use a grid system utilizing float:left. I could rewrite it with display:inline-block, but that would not change a thing. Let's say we have two columns: