如何重置 CSS 网格中项目的宽度? [英] How can I reset width for items in CSS Grid?

问题描述

我们有一个由 Flexbox 完成的平铺项目的遗留部分.项目的容器是一个 ul:

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;
 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，我就不会有这样的问题.

I had to use a width and height since the tiles have varied content and I needed them to be the same size. Obviously, if I could use css grid I'd have no such problem.

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

So I am trying to add a scss block inside a @supports for grid, which although it works the fixed width of the items is throwing off the grid gutters.

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

I tried using width: auto as you see to remove the previously used width: 180px for the old flexbox version, but the tiles do not properly size to the grid.

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

If I remove the width: 180px from the flexbox version, the grid version looks perfect. But then if someone has a browser that supports flex but not gris, it looks terrible.

我怎样才能基本上删除"width: 180px?

How can I basically "remove" the width: 180px?

推荐答案

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

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

这篇关于如何重置 CSS 网格中项目的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！