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

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

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

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

以下是一个示例代码：

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

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

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

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