1

我们有一个使用 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 网格，我就不会有这样的问题。

因此，我试图在@supportsfor 网格中添加一个 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以删除以前用于width: 180px旧 flexbox 版本的内容，但是图块的大小不适合网格。

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

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

4

2 回答 2

1

使用 flexbox，您需要定义弹性项目的大小。您可以使用width和。heightflex-basis

使用 Grid，方法就不同了。您可以在容器级别调整项目大小。无需在项目上定义尺寸。

 ul.icon-grid {
   display: grid;
   grid-template-columns: repeat(4, 180px);
   grid-auto-rows: 110px;
   grid-gap: 10px;
}
于 2017-05-15T20:26:28.317 回答
0

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

于 2020-04-01T03:34:49.037 回答