时间戳

首页 > 解决方案 > 在响应式列表中创建相等的间距

css - 在响应式列表中创建相等的间距

问题描述

我正在尝试在响应式容器中创建一个项目列表，它们之间存在一致的差距，包括那些在其行中碰巧没有完整项目集的项目，例如：

ul {
  width: 450px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #F00;
  justify-content: space-between;
}

li {
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid #000;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

问题是最后一行之间的间隙距离与其他行不同。我知道我可以使用 javascript 进行一些快速计算来确定间隙空间，但我想了解是否有办法仅使用 CSS 来执行此操作。一个左对齐的列表，具有相等的间距，随着父容器宽度的变化而变化（因此，如果窗口大小不同，父宽度为 320 像素，我们每行只能看到 3 个项目，之间的间距为 10 像素它们，包括包含 2 的最后一行，右侧有 110px 的间隙，因为该行中没有第 3 个项目）。

标签： cssflexbox

解决方案

这让我觉得CSS 网格比 flexbox 做得更好。下面我们设置display: grid使部分显示为网格，并grid-template-columns: 1fr 1fr 1fr 1fr;告诉网格模板四个相等的列。使用这种方法，网格中的每个新直接子元素都将落入每个后续单元格中（因为您没有告诉它明确执行其他任何操作），并且每次四个单元格完成一行时，都会开始一个新行。有关示例，请参见以下代码段：

ul {
  width: 450px;
  padding: 0;
  border: 1px solid #F00;
  justify-content: space-between;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

li {
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid #000;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

更新：我从您最初的问题中误解了您希望您的页面“响应”的方式。要让网格自动增加列号以填充页面，您可以使用grid-template-columns: repeat(auto-fill, 100px). 您可以在下面的代码段中看到这一点；您会注意到我已将样式更改为父容器的ul样式——80%您可以在整个页面片段视图中放大和缩小呈现的 UI，以查看它调整列号以定位内容。

ul {
  width: 80%;
  padding: 0;
  border: 1px solid #F00;
  justify-content: space-between;
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

li {
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid #000;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

推荐阅读