如何均匀分布 CSS 网格最后一行中的项目？

CSS 网格：均匀分布最后一行项目

在我们的网页设计工作中，经常需要在网格内均匀分布项目布局，尤其是最后一行。通过结合第 n 个子级和第 n 个最后类型规则，可以轻松完成此任务。但是，此方法的先决条件是了解网格中的列数。

考虑以下标记：

<div class="grid">
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
</div>

以及这些随附的 CSS 规则：

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: start;
    grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}

在此示例中，网格定义为三列，我们使用 nth-child 和指定最后一行中项目的分布和样式第 n 个最后类型。添加边框是为了演示视觉效果。

应用于 nth-child(3n-1):nth-last-of-type(1) 或 nth-child(3n-2) 的 css 规则： nth-last-of-type(1) 确保第二列和第三列中的最后一项将分别跨越两列或三列，并在美观上消耗行中的剩余空间。

以上是如何均匀分布 CSS 网格最后一行中的项目？的详细内容。更多信息请关注PHP中文网其他相关文章！