Question

我陷入了一种奇怪的境地。我正在尝试构建一个网格系统，其中所有元素具有相同的固定宽度（200px是特定的）。我想构建一个仅使用CSS的智能网格系统，其中每个＆＃34; row＆＃34;将尽可能多地填充第一个内容，并在第一个中使用列数，并在其他所有行中使用＃34;行＆＃34;。

例如：假设我有一个宽度为640px的容器。网格将尝试在第一行中尽可能多地拟合，并证明具有均匀分布的线。结果，第一行将有3个大小为200px的元素，每个元素之间有20px（假设没有填充）。现在，网格将为其余行使用20px的余量。

我似乎找不到可以使用它的CSS解决方案。我目前的实施工作如下：

.grid {
   width: 100%;
   display: block;
   text-align: justify;
}

.grid::after {
    content: "";
    display: inline-block;
    width: 100%;
}

.grid .item {
    display: inline-block;
    width: 200px;
    margin: 10px 0;
}

这个实现有一个主要问题。每行必须具有相同数量的元素。因此，如果第1行有3个元素，第2行必须有3个元素，否则第2行根本就不合理。由于这不起作用，我试图给容器宽度为95％并添加margin: 0 auto;。这没有用，因为我计算了元素之间的差距。这是我希望支持flex box的那一刻。我不会构建支持IE8的网站，但如果IE9不支持规范，我就无法使用它。我知道我可以用JS实现这个目标，但我想知道我是否可以用CSS实现它。

我目前对解决问题的猜测是根据元素的宽度计算左/右边距。我不希望这个网格系统成为适用于任何宽度的终极灵活网格系统。我想要做的就是在手机上每行显示一个元素，在笔记本电脑上每行显示3个元素，在更大的显示器上每行显示5个元素。

很抱歉很长的帖子。

TL; DR我需要构建一个网格系统，根据容器的给定宽度分配第一行，并使用第N行第一行的边距。

Answer 1

您可以使用媒体查询并创建方案：

2项 - 每行包裹
3个项目 - 每行包裹
..等等。

此时您只需要向nth-child(n)选择器添加明确权限;

显然，这不需要在项目本身上进行，而是在项目包装上进行，为您处理边距;

Answer 2

类似的东西吗？

*, *:before, *:after {
  box-sizing: border-box;
}
.grid {
  align-content: space-around;
  background: gold;
  max-width: 640px;
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  justify-content: space-around;
}
.grid .item {
  background: lightseagreen;
  padding: 24px;
  width: 200px;
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

这似乎可行，但是很难控制垂直间距，因为它当然取决于容器的height，但是您可以在y轴上使用百分比或固定边距。

在网格中均匀分配固定宽度div

2 个答案: