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
401
votes
9 answers

Centering in CSS Grid

I'm trying to create a simple page with CSS Grid. What I'm failing to do is center the text from the HTML to the respective grid cells. I've tried placing content in separate divs both inside and outside of the left_bg and right_bg selectors and…
beetroot
  • 4,129
  • 3
  • 12
  • 8
314
votes
3 answers

Prevent content from expanding grid items

TL;DR: Is there anything like table-layout: fixed for CSS grids? I tried to create a year-view calendar with a big 4x3 grid for the months and therein nested 7x6 grids for the days. The calendar should fill the page, so the year grid container gets…
Loilo
  • 13,466
  • 8
  • 37
  • 47
281
votes
5 answers

CSS grid wrapping

Is it possible to make a CSS grid wrap without using media queries? In my case, I have a non-deterministic number of items that I want placed in a grid and I want that grid to wrap. Using Flexbox, I'm unable to reliably space things nicely. I'd like…
kentcdodds
  • 27,113
  • 32
  • 108
  • 187
231
votes
5 answers

CSS-only masonry layout

I need to implement a masonry layout. However, for a number of reasons I don't want to use JavaScript to do it. Parameters: All elements have the same width Elements have a height that cannot be calculated server side (an image plus various…
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
228
votes
2 answers

Equal height rows in CSS Grid Layout

I gather that this is impossible to achieve using Flexbox, as each row can only be the minimal height required to fit its elements, but can this be achieved using the newer CSS Grid? To be clear, I want equal height for all elements in a grid across…
Hlsg
  • 3,213
  • 2
  • 12
  • 17
184
votes
11 answers

Equal width columns in CSS Grid

I'd like to have the html below showing in n equal columns whether there are two, or three, or more child elements to the row element using css grid - Flexbox makes this easy but I cannot get it done using css grid - any help is appreciated.
user1678736
  • 2,133
  • 4
  • 16
  • 10
162
votes
6 answers

Make grid container fill columns not rows

I want my grid to fill in vertically like this: 1 4 7 2 5 8 3 6 9 ... arbitrary number of additional rows. Instead, it fills in horizontally like this: 1 2 3 4 5 6 7 8 9 I want to specify the number of columns in my grid, not the number of…
Glen Pierce
  • 4,401
  • 5
  • 31
  • 50
137
votes
7 answers

Can I make a CSS grid with dynamic number of rows or columns?

What I wanna do is to make a CSS grid with a dynamic number of cells. For the sake of simplicity, let's assume there will always be four cells per row. Can I specify a grid with such a dynamic number of rows? To make it easier, here's the Flexbox…
art-solopov
  • 4,289
  • 3
  • 25
  • 44
117
votes
7 answers

How can I target a specific column or row in a CSS grid layout?

Is it possible to select a specific grid column or row with CSS? For example, say I have a 3 row by 2 column CSS grid layout: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. How would I select all elements from the 2nd column? For…
Diode Dan
  • 4,801
  • 6
  • 25
  • 34
113
votes
5 answers

What is difference between justify-self, justify-items and justify-content in CSS grid?

I'm really confused. When looking for online resources and documentation, most of the documentation of these properties seem to reference Flex-box, not grid. And I don't know how applicable the documentation for the equivalent properties in Flex-box…
keithlee96
  • 1,724
  • 2
  • 11
  • 17
106
votes
4 answers

force css grid container to fill full screen of device

How do I force a css grid container take the full width and height of the device screen for a single page app? Modified example is from Mozilla: Firefox documentation .wrapper { display: grid; border-style: solid; border-color: red; …
metrix
  • 1,486
  • 2
  • 11
  • 19
103
votes
3 answers

Flex / Grid layouts not working on button or fieldset elements

I'm trying to center inner elements of a
Ingemar
  • 1,638
  • 2
  • 12
  • 15
102
votes
1 answer

Why does minmax(0, 1fr) work for long elements while 1fr doesn't?

So I have this grid: +---------+------------------------------+---------+ |
|

- 1000 characters long |

| +---------+------------------------------+---------+ Inside p there's super long string with no spaces. divs are…
seeker_of_bacon
  • 1,939
  • 2
  • 19
  • 20
102
votes
4 answers

How do I specify row heights in CSS Grid layout?

I have a CSS Grid Layout in which I want to make some (middle 3) rows stretch to their maximum size. I'm probably looking for a property similar to what flex-grow: 1 does with Flexbox but I can't seem to find a solution. Note: This is intended for…
Chris
  • 3,680
  • 6
  • 26
  • 43
88
votes
2 answers

Set column width to content length in CSS Grid

I looked at the documentation but did not find such property. I want to fit all cells in one column to its content width using css grid. For the first case I should apply this property for the container: grid-template-columns: auto auto; But what…
mr.boris
  • 3,667
  • 8
  • 37
  • 70
1
2 3
…
99 100