如何创建这样的CSS网格布局？
如何创建这样的CSS网格布局？
提问于 2021-11-01 07:00:21
我正在尝试创建这样的网格布局
我能够创建这个布局。我在为第一列而挣扎，我不想让它达到行的高度。我想实现的网格布局，就像在第一张图片。灰色细胞只是我以后会添加移动内容的div。
我的CSS代码：
.cards_grid {
grid-auto-columns: 1fr;
grid-column-gap: 1.5rem;
grid-row-gap: 1.5rem;
-ms-grid-rows: auto 1.5rem auto;
grid-template-areas:
"first first first first second second second second second third third third"
"fourth fourth fourth fourth fifth fifth fifth fifth sixth sixth sixth sixth";
-ms-grid-columns: minmax(auto, 1fr);
grid-template-columns: minmax(auto, 1fr);
}我已经尝试过grid-layout-rows: masonry，但是大多数浏览器都不支持它。
回答 4
Stack Overflow用户
回答已采纳
发布于 2021-11-01 09:11:06
坚持使用显式定义网格区域的方法，您可以使用与水平放置相同的技术(在这种情况下，您已经在垂直放置上定义了12列)。
看起来，网格应该有5行，第一个元素向下扩展为2，下面的元素(第4个元素)向下扩展为3，依此类推。
这个片段删除了不需要的CSS片段，并将整个网格设置为高宽比为4:3。显然，这可能会在您的特定需求中发生变化。
.cards_grid {
width: 100vmin;
height: 75vmin;
display: grid;
grid-column-gap: 1.5rem;
grid-row-gap: 1.5rem;
grid-template-areas: "first first first first second second second second second third third third" "first first first first second second second second second third third third" "fourth fourth fourth fourth second second second second second third third third" "fourth fourth fourth fourth fifth fifth fifth fifth sixth sixth sixth sixth" "fourth fourth fourth fourth fifth fifth fifth fifth sixth sixth sixth sixth";
}
.cards_grid>div {
background: gray;
}
.cards_grid>div:nth-child(1) {
grid-area: first;
}
.cards_grid>div:nth-child(2) {
grid-area: second;
}
.cards_grid>div:nth-child(3) {
grid-area: third;
}
.cards_grid>div:nth-child(4) {
grid-area: fourth;
}
.cards_grid>div:nth-child(5) {
grid-area: fifth;
}
.cards_grid>div:nth-child(6) {
grid-area: sixth;
}<div class="cards_grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Stack Overflow用户
发布于 2021-11-01 08:11:37
你可以试试这个，我知道有比这个更好的，你可以自己试试
<!DOCTYPE html>
<html>
<head>
<style>
body{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 490px;
background: #e5e5e5;
display: flex;
flex-wrap: wrap;
}
.box-cl-1{
width: 30%;
display: flex;
flex-direction: column;
}
.box-1{
margin: 10px;
flex: 30%;
height: 130px;
background: #8f8f8f;
}
.box-2{
margin: 10px;
flex: 50%;
height: 200px;
background: #8f8f8f;
}
.box-cl-2{
width: 70%;
display: flex;
flex-direction: column;
}
.box-3{
margin: 10px;
flex: 70%;
height: 250px;
background: #8f8f8f;
}
.box-4{
margin: 10px;
flex: 30%;
height: 250px;
background: #8f8f8f;
}
.box-5{
margin: 10px;
flex: 50%;
height: 200px;
background: #8f8f8f;
}
.box-6{
margin: 10px;
flex: 50%;
height: 200px;
background: #8f8f8f;
}
</style>
</head>
<body>
<div class="container">
<div class="box-cl-1">
<div class="box-1"></div>
<div class="box-2"></div>
</div>
<div class="box-cl-2">
<div style="display: flex;">
<div class="box-3"></div>
<div class="box-4"></div>
</div>
<div style="display: flex;">
<div class="box-5"></div>
<div class="box-6"></div>
</div>
</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2021-11-01 08:14:13
你可以使用简单的砖石风格。在GitHub：https://masonry.desandro.com/上使用这个
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69793536
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号