css - 具有不等高和不等宽列的 CSS 网格
问题描述
我有 5 个盒子:第一排三个,第二排接下来两个:
我希望除第二个之外的所有盒子都具有相同的高度,并且第 5个盒子正好位于第 3个盒子的正下方。
我用 flexbox 试过这个,现在我用display: grid
. 如果可能的话,我正在寻找仅CSS 的解决方案。
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-auto-rows: min-content;
grid-gap: 0;
background-color: #2196F3;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
border: 1px solid #ccc;
font-size: 30px;
}
.item4 {
grid-column-start: 1;
grid-column-end: 3;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-container">
<div class="item1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
<div class="item2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.</p></div>
<div class="item3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
<div class="item4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
<div class="item5"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
</div>
我该怎么做才能达到预期的效果?
解决方案
这是使用基于行的放置的一种方法。
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: repeat(10, 1fr);
grid-gap: 5px;
padding: 5px;
height: 100vh;
background-color: #2196F3;
}
/* line-based placement */
.item1 { grid-column: 1 / 2; grid-row: 1 / 4; }
.item2 { grid-column: 2 / 3; grid-row: 1 / 8; }
.item3 { grid-column: 3 / 4; grid-row: 1 / 4; }
.item4 { grid-column: 1 / 3; grid-row: 8 / 11; }
.item5 { grid-column: 3 / 4; grid-row: 4 / 11; }
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
border: 1px solid #ccc;
}
* { box-sizing: border-box; margin: 0; }
<div class="grid-container">
<div class="item1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
<div class="item2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.</p></div>
<div class="item3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
<div class="item4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
<div class="item5"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
</div>
这是另一种使用grid-template-areas
.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: repeat(10, 1fr);
grid-gap: 5px;
padding: 5px;
height: 100vh;
background-color: #2196F3;
grid-template-areas:
" item1 item2 item3 "
" item1 item2 item3 "
" item1 item2 item3 "
" . item2 item5 "
" . item2 item5 "
" . item2 item5 "
" . item2 item5 "
" item4 item4 item5 "
" item4 item4 item5 "
" item4 item4 item5 ";
}
.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
.item4 { grid-area: item4; }
.item5 { grid-area: item5; }
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
border: 1px solid #ccc;
}
* { box-sizing: border-box; margin: 0; }
<div class="grid-container">
<div class="item1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
<div class="item2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam sunt blanditiis facere eius placeat suscipit consequuntur ullam dolor quod tenetur. Nostrum deleniti id temporibus officia, itaque voluptatibus laudantium ad porro.</p></div>
<div class="item3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
<div class="item4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
<div class="item5"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
</div>
推荐阅读
- python - 组合框更改时更新 QAbstractTableModel
- multidimensional-array - 给定开始和结束时间的餐桌预订
- java - Java调用继承的方法总是返回null
- python - Python - 如何让石头剪刀布运行多轮?
- python - 导入自己的模块问题:没有名为'xx'的模块
- python - 在 kivymd 上重新运行应用程序后如何保存和加载数据
- python - 在 for 循环后退出
- angular - @angular/material 中的元素未正确显示
- linux - 为什么会出现此错误“运行特权模式时必须在主机命名空间中运行容器”?
- c++ - unordered_map 的 Unordered_map 与对键 C++ 的自定义散列函数?