grid-template-columns: repeat(3, 33.33%);
时间: 2024-05-15 08:09:47 浏览: 11
这是一个CSS属性,用于定义网格容器中每列的宽度。具体来说,`grid-template-columns: repeat(3, 33.33%);`表示网格容器中有3列,每列的宽度为33.33%。
这个属性可以用于创建一个具有3列的网格布局,每列的宽度都是容器宽度的33.33%。这样可以方便地将内容分布在网格中的不同列上。
以下是一个示例代码,演示了如何使用`grid-template-columns: repeat(3, 33.33%);`创建一个具有3列的网格布局:
```html
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
}
.grid-item {
border: 1px solid black;
padding: 10px;
}
</style>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
```
在上面的代码中,`.grid-container`是一个网格容器,`.grid-item`是网格中的项目。通过设置`grid-template-columns: repeat(3, 33.33%);`,我们将容器分为3列,每列的宽度为容器宽度的33.33%。每个项目都会自动填充到网格中的不同列中。