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
59
votes
1 answer

Does CSS Grid have a flex-grow function?

Is there an analog to flex-grow for the grid property ? I'd like my grid areas to accomodate the content they receive but have some areas take more place than others like flex-grow for flex. Practically, in the example below I'd like the…
Ced
  • 15,847
  • 14
  • 87
  • 146
58
votes
5 answers

A grid layout with responsive squares

I am wanting to create a grid layout with responsive squares. I feel like I should be able to do this with CSS Grid layout but having trouble setting the height of each square to be equal to the width. Also having trouble setting a gutter between…
Stretch0
  • 8,362
  • 13
  • 71
  • 133
54
votes
4 answers

Making a dragbar to resize divs inside CSS grids

I have 2 boxes and a vertical div line in one unique container div (code and fiddle below). I'm using CSS grids to position my elements inside the container What I'd like to accomplish is to use the vertical line to resize horizontally the two boxes…
Aquazi
  • 617
  • 1
  • 6
  • 8
52
votes
1 answer

Change the column order in a CSS grid

I am playing around with CSS grids. When I view it on a desktop size (min-width: 769px), I have a single row with three columns. Something like this: --------------------------------------------- | col 1 | col 2 | col 3 | | …
jwknz
  • 6,598
  • 16
  • 72
  • 115
51
votes
4 answers

Controlling the size of an image within a CSS Grid layout

I have a CSS grid layout with a bunch of areas and a photo container. I don't know how to: control the size of the photo, so that it is contained within the area of the grid keep the width of the photo at 100% (thus equal to its container) and…
martin
  • 3,289
  • 5
  • 22
  • 27
51
votes
4 answers

Last margin / padding collapsing in flexbox / grid layout

I have a list of items that I'm trying to arrange into a scrollable horizontal layout with flexbox. Each item in the container has a margin left and right, but the right margin of the last item is being collapsed. Is there a way to stop this…
Kevin Wilson
  • 7,753
  • 8
  • 35
  • 39
49
votes
6 answers

How to make hover state on row table with CSS grid layout

This a table that created with CSS Grid Layout, but I have a problem with it, I can't make hover state on each row. I only want use CSS for this. Can anyone give me a solution for this? .table { display: grid; grid-template-columns:…
Nguyen Trung Hieu
  • 513
  • 1
  • 4
  • 9
49
votes
1 answer

How to repeat grid-template-rows for all rows

I'm trying create template for rows in my grid block: grid-template-rows: repeat(3, 150px); I know, this template should be work for first 3 rows. However, from 4 row this template is not work. Can i make template for all rows? P.S. This template…
Dmitriy Doronin
  • 728
  • 1
  • 7
  • 13
48
votes
7 answers

Setting minimum and maximum number of columns using CSS Grid

I have 10 divs (64px x 64px) that I want to display in 5 columns maximum (for Large and Extra Large viewports) and 3 columns minimum (for small viewports like iPhone 7 etc). I am trying to do this with CSS Grid but not able to do the minimum columns…
Sumit Bagga
  • 501
  • 1
  • 4
  • 6
46
votes
2 answers

Equal width flex items even after they wrap

Is it possible to make a pure CSS solution like this: Items have some min-width. They should grow dynamically to fill all container width and then wrap to new lines All items on the list should have equal width. This is how it looks now: And…
Adam Szmyd
  • 2,765
  • 2
  • 24
  • 32
44
votes
3 answers

sticky position on css grid items

I've looked at other examples of this on here but can't find one that makes this work. I want the sidebar (section) to be sticky while the page scrolls. the position: sticky works if I put it on the nav, so my browser def supports it. main { …
totalnoob
  • 2,521
  • 8
  • 35
  • 69
43
votes
2 answers

CSS Grid auto fit with max-content

I have 4 columns. The actual content for columns 1 and 4 is 150px, column 2 is 250px and column 3 is 370px. I want to wrap the columns when the browser width changes. When I decrease the width of the browser, I want each column to shrink down to…
Hectooorr
  • 665
  • 1
  • 8
  • 15
43
votes
2 answers

Dynamically resize columns in css grid layout with mouse

I am trying to dynamically resize css grid layout boxes by dragging the column dividers (or resize placeholders) with the mouse. I set resize: horizontal; on the nav element to resize, and it gets resized when I drag the small resize handle in the…
ccpizza
  • 28,968
  • 18
  • 162
  • 169
43
votes
9 answers

Make flex items overlap

I'd like to show a horizontal series of a unknown number of playing cards. To do this, they will have to overlap if there are too many. I'm having trouble convincing a flex box to overlap the cards without shrinking them. The example below…
Michael Arrison
  • 1,464
  • 2
  • 13
  • 22
42
votes
6 answers

Can I have a varying number of columns per row in a CSS grid?

.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; grid-auto-rows: 60px; grid-gap: 15px; } .col { background-color: tomato; }
knitevision
  • 3,023
  • 6
  • 29
  • 44
1 2
3
…
99 100