CSS网格特定布局
CSS网格特定布局
提问于 2021-06-20 04:59:23
我正在寻找一种方法来表示下一个布局使用纯粹的CSS网格。
布局图片：https://i.stack.imgur.com/rDxv3.jpg
我的代码：
<div class=“grid-layout”>
<div class=“item”>1</div>
<div class=“item”>2</div>
<div class=“item”>3</div>
<div class=“item”>4</div>
</div>回答 2
Stack Overflow用户
回答已采纳
发布于 2021-06-20 07:20:21
简单地如下所示：
.grid-layout {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
height:500px;
}
.grid-layout > * {
border:2px solid;
}
.grid-layout > :first-child {
grid-area:span 3/span 3;
}<div class="grid-layout">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
如果你想一直保持正方形，试试这个：
.grid-layout {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
.grid-layout > * {
border:2px solid;
display:flex;
}
.grid-layout > *:before {
content:"";
padding-top:100%;
}
.grid-layout > :first-child {
grid-area:span 3/span 3;
}<div class="grid-layout">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
Stack Overflow用户
发布于 2021-06-20 05:17:14
每个子div都需要具有以下CSS所具有的相应类名。增加和减小间隙到所需的大小(第一个值是行之间的间隙，第二个值是列之间的间隙)
.grid-layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px 5px;
grid-template-areas: "item-1 item-1 item-2" "item-1 item-1 item-3" "item-1 item-1 item-4";
}
.item-1 {
grid-area: item-1;
}
.item-2 {
grid-area: item-2;
}
.item-3 {
grid-area: item-3;
}
.item-4 {
grid-area: item-4;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68050685
复制相关文章
相似问题
腾讯云开发者
