我的整个网站有一个网格布局,使用 12 列,我想要 3 个项目,每个项目占 3 列,并在它们之间分配重命名空间,例如 justify-content: space- Between 是 css flex
我知道我可以在没有 CSS 网格的情况下做到这一点,只是想知道是否
我可以用 css grid 做到这一点我想实现这样的目标
html
<div class="grid">
<div class="grid__item">1</div>
<div class="grid__item">2</div>
<div class="grid__item">3</div>
</div>
CSS
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
width: 100%;
gap: 10px;
justify-content: space-between;
}
.grid__item {
grid-column: span 3;
}
.grid__item:nth-child(1) {
background: red;
}
.grid__item:nth-child(2) {
background: lightblue;
}
.grid__item:nth-child(3) {
background: lightgreen;
}