How Can I Reset Width For Items In Css Grid?

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; paddi

Solution 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;
}

Solution 2:

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