How can I reset width for items in CSS Grid?

Question

We have a legacy section of tiled items that were done with Flexbox. The container of the items is a ul:

ul.icon-grid {
 display: flex;
 flex-wrap: wrap;
 list-style: none;
 padding-left: 0;
}

And then the items inside are li:

.icon-swatch__wrapper {
   width: 180px;
   height: 110px;
   text-align: center;
   font-size: 12px;
   border: 1px solid #ccc;
   margin: 5px;
   padding: 10px;
 }

I had to use a width and height since the tiles have varied content and I needed them to be the same size. Obviously, if I could use css grid I'd have no such problem.

So I am trying to add a scss block inside a @supports for grid, which although it works the fixed width of the items is throwing off the grid gutters.

@supports (display: grid) {
  ul.icon-grid {
   display: grid;
   grid-gap: 10px;
   grid-template-columns: repeat(4, 1fr);
   list-style: none;
   padding: 0;
   .icon-swatch__wrapper, li {
     margin: 0;
     width: auto;
   }
  }
}

I tried using width: auto as you see to remove the previously used width: 180px for the old flexbox version, but the tiles do not properly size to the grid.

If I remove the width: 180px from the flexbox version, the grid version looks perfect. But then if someone has a browser that supports flex but not gris, it looks terrible.

How can I basically "remove" the width: 180px?

score 1 · Answer 1 · answered May 15 '17 at 20:26

1

With flexbox you need to define the size of flex items. You can use width, height and flex-basis.

With Grid, the approach is different. You can size the items at the container level. No need to define a size on the items.

 ul.icon-grid {
   display: grid;
   grid-template-columns: repeat(4, 180px);
   grid-auto-rows: 110px;
   grid-gap: 10px;
}

answered May 15 '17 at 20:26

Michael Benjamin

346,931
104
581
701

I know how to size the things in Grid, my issue is the same items need to be sized in Flexbox. Using` flex-basis:180px` does not make the items uniform widths in the flexbox version. – Steve May 15 '17 at 20:29
Can you post a working demo? There are several possible reasons for the problem you describe. For one, see ***The `flex-shrink` Factor*** section here: http://stackoverflow.com/a/34355447/3597276 – Michael Benjamin May 15 '17 at 20:32

score 0 · Accepted Answer · edited Sep 19 '20 at 13:54

0

You can use width: unset; within the @supports grid block.

edited Sep 19 '20 at 13:54

corn on the cob

2,093
3
18
29

answered Apr 01 '20 at 03:34

Colin Bernays

112
9

How can I reset width for items in CSS Grid?

2 Answers2

Linked

Related