Stack Overflow
Stack Overflow

Questions tagged [css-grid]

CSS grid layout is a W3C technology that allows for the creation of grids. It eliminates the need to use floats, tables, absolute positioning and even flexbox for building all sorts of grids, from simple to complex. Do not use this tag for CSS grid systems in general.

CSS grid layout is a W3C technology that allows for the creation of grids. It eliminates the need to use floats, tables, absolute positioning and even flexbox for building all sorts of grids, from simple to complex. Do not use this tag for CSS grid systems in general.

Most browsers support the current specification (CSS Grid Layout Module Level 1 W3C Candidate Recommendation, 14 December 2017).

However, Internet Explorer 10, Internet Explorer 11, and Edge 15 support an earlier version of the spec (W3C Working Draft 7 April 2011).

Useful links

5955 questions
88
votes
10 answers

Reverse order of columns in CSS Grid Layout

I was hoping to use CSS Grid to reverse the apparent order of two side-by-side divs, where one of the divs grows arbitrarily (I don't want to use floats). I've created a plunkr here: http://plnkr.co/edit/6WZBnHbwhD7Sjx2ovCO7?p=preview #container…
Rob
  • 3,276
  • 2
  • 22
  • 25
87
votes
3 answers

CSS Grid - Auto height rows, sizing to content

I have two grids nested within a grid. Unfortunately the right nested grid .grid-3 sets the height of the rows so that both the left and right grid are the same height, the extra space is shared among the divs with the class .right. How can I set…
CalAlt
  • 1,683
  • 2
  • 15
  • 29
87
votes
3 answers

Items that span all columns/rows using CSS grid layout

With the CSS Grid Layout Module soon shipping in Firefox and Chrome, I thought that I'd try to get a handle of how to use it. I've tried to create a simple grid with one item a spanning the left side of all of the rows, with the other items (b, c,…
Marlius
  • 871
  • 1
  • 6
  • 4
85
votes
10 answers

Preventing double borders in CSS Grid

Given the current CSS grid example, how can I collapse the borders in order to avoid the double borders ? This is such a simple thing to achieve using an Html table. How do I do it using display: grid ? .wrapper { display: grid; …
klugjo
  • 19,422
  • 8
  • 57
  • 75
84
votes
9 answers

CSS Grid: Is it possible to apply color to grid gaps?

Is there a way to style more than just the width of the grid gaps within the CSS grid layout module? I can't find anything about it in the documentation, however one would tend to think that it would be possible as grid gaps tend to be colored in…
Taishi
  • 1,042
  • 1
  • 8
  • 15
83
votes
9 answers

How to center elements on the last row in CSS Grid?

I am using CSS grid to layout some items like this... #container { display: grid; grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%; } .item { background: teal; color: white; padding: 20px; margin:…
fightstarr20
  • 11,682
  • 40
  • 154
  • 278
78
votes
4 answers

How to set the maximum width of a column in CSS Grid Layout?

What I want to achieve: Using CSS Grid Layout, to have a page with a right column which size is derived from its content, but only up to 20% of the window width. How I thought it would work: div { border-style: solid; } #container { …
WoJ
  • 27,165
  • 48
  • 180
  • 345
73
votes
6 answers

Why does grid-gap cause an overflow?

Why do I have an overflow on the X axis in the following snippet? The overflow is generated once I apply grid-gap: 10px on my .body grid container. div:not(.header):not(.body):not(.row) { border: 1px solid grey; } .header { margin-top:…
Damiano Barbati
  • 3,356
  • 8
  • 39
  • 51
72
votes
4 answers

CSS Grid Layout not working in IE11 even with prefixes

I'm using following HTML markup for my grid.
....
....
....
Faisal Khurshid
  • 1,869
  • 3
  • 21
  • 27
70
votes
6 answers

How to make CSS Grid items take up remaining space?

I have a card built with CSS Grid layout. There might be an image to the left, some text to the right top and maybe a button or a link at the right bottom. In the code below, how can I make the green area take up as much space as possible and at the…
Jens Törnell
  • 23,180
  • 45
  • 124
  • 206
68
votes
6 answers

How to make the items in the last row consume remaining space in CSS Grid?

Is there a way to force all the items in the last row, of a grid, to fill the row, no matter how many they are? I do not know the number of items that will be in the grid so I cannot target them directly. I tried to use grid-auto-flow: dense, but it…
Bondsmith
  • 1,343
  • 3
  • 13
  • 27
68
votes
5 answers

Make a grid item span to the last row / column in implicit grid

Is it possible to make a grid item span from the first to the last row when I don't know the number of rows? Let’s say I have the following HTML content with an unknown number of boxes. How can I make the third .box span from the first grid-line to…
jbe
  • 1,722
  • 1
  • 12
  • 20
66
votes
5 answers

Collapsing borders using CSS Grid

I'm having fun getting my head around the new CSS Grid spec, but I'm running into trouble with borders. Is it possible to collapse borders in a CSS Grid, or is there any way to style the gutter? As you can see in the snippet below, the 10px borders…
Tim Foley
  • 665
  • 1
  • 5
  • 6
64
votes
4 answers

Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What's the difference?

I just noticed some values of the align-self property that I haven't seen before. What are start, end, self-start, and self-end and what are their differences from flex-start and flex-end? I've been referring to the guide at CSS-Tricks often when I…
Vince
  • 3,962
  • 3
  • 33
  • 58
64
votes
8 answers

Using CSS transitions in CSS Grid Layout

I am trying to get my sticky header to have a transition effect so it eases in rather than just a snap movement. What am I doing wrong? Here's my a working version: http://codepen.io/juanmata/pen/RVMbmr Basically the following code adds the class…
Dan
  • 1,565
  • 3
  • 23
  • 43
1
2
3
…
99 100