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
40
votes
3 answers

How to make a monopoly board using css grid?

I want to create a monopoly board like . There are following features in the board The corner are square shaped and bigger than other boxes The text of each row is facing a specfic angle. My basic html structure is below Board Row 1 Tile…
Maheer Ali
  • 35,834
  • 5
  • 42
  • 73
40
votes
2 answers

Setting different lengths for grid gaps in CSS Grid

I'm creating a layout using CSS Grids, and I want to have different space between each row. I can create the layout fine by just using margin on each element, but this kind of obscures the simplicity of the code. Is there any grid tricks I can do…
Stephan Olsen
  • 1,623
  • 1
  • 14
  • 29
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
1 answer

Make a grid column span the entire row

Imagine we have two CSS grid containers with a dynamic columns count based on width: display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); The grid works perfectly, but what if we need to have another grid to have the first…
Jurosh
  • 6,984
  • 7
  • 40
  • 51
38
votes
3 answers

The difference between percentage and fr units

I am playing around with CSS Grid Layout and came across a question I cannot find an answer for. Consider the following example: :root { --grid-columns: 12; --column-gap: 10px; --row-gap: 10px; } .grid { display: grid; …
Morpheus
  • 8,829
  • 13
  • 51
  • 77
38
votes
1 answer

Getting columns to wrap in CSS Grid

How can you specify the maximum number of columns when using display: grid;, with it automatically breaking when the content becomes too wide for the space (or smaller than a minimum size)? Is there a way to do this without media queries? For…
Panda TG Attwood
  • 1,468
  • 2
  • 16
  • 31
37
votes
4 answers

CSS grid square layout

I am trying to create grid/layout consists of squares. Four squares in each row. Squares can't distort on screen resize. Width and height must be the same all the time (I don't want fixed values). I must use CSS grid. Can anyone help me…
Minio
  • 371
  • 1
  • 3
  • 5
36
votes
3 answers

Make element take two columns

I tried to achieve the masonry style using css with the column layout like the markup below. I want to know if it's possible to make the .green one to take two columns instead of one? Thank you in advance! .parent{ column-gap: 1rem; …
Ayoub Marouan
  • 431
  • 1
  • 5
  • 8
36
votes
4 answers

How do I set text-overflow to ellipsis in CSS grid layout?

I have a grid layout like the one in header below. There is a text in the div whose width is 1fr. I want the text inside that div to be truncated when it is too long. Adding text-overflow as ellpsis is not working. Any idea how to do it? It has to…
nullDev
  • 11,170
  • 8
  • 34
  • 52
34
votes
2 answers

CSS Grid row/column gap on specific elements?

I have created the grid below using CSS Grid and I am wondering if it's possible to have a gap only between specific elements within the grid, rather than applying a universal gap to all grid elements. Here's what I have right now: body { …
user13286
  • 3,027
  • 9
  • 45
  • 100
34
votes
1 answer

Can grid-row-gap / grip-column-gap be overridden for a single gutter?

Is there a way to set a single grid-row-gap to specific size that is different from the rest of the grid? Use case: the top row of the grid should have less of a gap to the second row than the rest of the grid as it acts as a header.
Eric R
  • 673
  • 2
  • 9
  • 15
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
4 answers

How to use grid-template-areas in react inline style?

So, I've been playing with css-grids in react when I noticed that grid-template-areas has a bit different syntax which might not be compatible in inline react styles. I'm not using any libraries just plain old react inline styles with style prop.…
shriek
  • 5,605
  • 8
  • 46
  • 75
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
32
votes
3 answers

How do I make the first grid item span 100%?

I have the following for desktop, which creates 4 equal columns all at 25%. .footer-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
One
Two
Three
…
Al-76
  • 1,738
  • 6
  • 22
  • 40
1 2 3
…
99 100