CSS：重置 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 grid，我就不會有這樣的問題。

所以我試圖在網格的@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刪除以前使用的width: 180px舊版 flexbox 版本，但圖塊的大小不適合網格。

如果我從 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;
}

Answer 2

您可以使用width: unset; 在@supports grid塊內。