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

发布日期： 2024-10-27 阅读量： 作者： 网络

使用 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>

随便看看