使用 CSS Grid 布局的自动填充列元素如何占满一行？

css grid布局中如何让自动填充列元素占满一行

在使用css grid布局时，当父元素使用了grid-template-columns: repeat(auto-fill, 100px)的自动填充方式，子元素无法通过设置具体的grid-column-end数值来让自己占满一行。这时，可以使用如下方式解决：

在子元素上设置grid-column: span 100%，即可让子元素占满一行。

以下是一个示例代码：

立即学习“前端免费学习笔记（深入）”；

<p class="grid-container">
  <p class="item-1">item 1</p>
  <p class="item-2">item 2</p>
  <p class="item-3">item 3</p>
</p>

登录后复制

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

.item-1 {
  grid-column: span 100%;
}

登录后复制

以上就是使用 CSS Grid 布局的自动填充列元素如何占满一行？的详细内容，更多请关注抖狐科技其它相关文章！