如何重置 CSS 网格中项目的宽度？

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

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

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

@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，但是图块的大小不适合网格。

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

我怎么才能基本上"remove" 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;
}

Answer 2

您可以在 @supports grid 块中使用 width: unset;。

如何重置 CSS 网格中项目的宽度？

How can I reset width for items in CSS Grid?

html

css

sass

css-grid