gpt4 book ai didi

html - CSS 网格中的中心行

转载 作者:太空宇宙 更新时间:2023-11-04 15:47:36 26 4
gpt4 key购买 nike

<分区>

我正在创建一个 4x3 网格布局并希望第二行居中,因为第一行有四个元素。

像这样:

enter image description here

演示代码:

.grid-container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 50% 50%;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
</div>

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com