html - 如何重置 CSS Grid 中元素的宽度？

Question

我们有一个使用 Flexbox 完成的平铺元素的遗留部分。元素的容器是一个ul:

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

然后里面的元素是li:

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

我必须使用宽度和高度，因为图 block 的内容各不相同，而且我需要它们的大小相同。显然，如果我可以使用 css 网格，我就不会有这样的问题。

所以我尝试在网格的 @supports 中添加一个 scss block ，虽然它可以工作，但元素的固定宽度正在摆脱网格排水沟。

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

如您所见，我尝试使用 width: auto 来删除以前用于旧 flexbox 版本的 width: 180px，但是图 block 的大小不适合网格.

如果我从 flexbox 版本中删除 width: 180px，网格版本看起来很完美。但是如果有人的浏览器支持 flex 但不支持 gris，那看起来就糟透了。

我怎样才能基本上“删除”width: 180px？

Answer 1

使用 flexbox，您需要定义 flex 元素的大小。您可以使用 width、height 和 flex-basis。

对于 Grid，方法是不同的。您可以在容器级别调整元素的大小。无需为元素定义尺寸。

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