css - 如何使 3 个项目填充具有特定行和列的 6x6 网格?
问题描述
我想建模一个 6x6 网格,只用 3 个元素填充所有列和行。大小应该与 36 个单元格相同,但 3 个单元格填满了所有空间。出于某种原因,我的单元格似乎没有填充它们各自的单元格和列。
我找到了该span
选项,尽管它似乎无法正常工作。
这是我的代码:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
grid-template-rows: auto auto auto auto auto auto;
background-color: #2196F3;
padding: 5px;
}
.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;
}
#box1 {
grid-column: 1 / span 4;
grid-row: 1 / span 2;
}
#box2 {
grid-column: 5 / 6;
grid-row: 1 / span 6;
}
#box3 {
grid-column: 1 / span 4;
grid-row: span 3 / span 6;
}
<div class="grid-container">
<div class="grid-item" id="box1">1</div>
<div class="grid-item" id="box2">2</div>
<div class="grid-item" id="box3">3</div>
</div>
解决方案
与其将 grid-template-row/grid-template-column 设置为 auto,不如使用 repeat 函数来设置 6x6 网格。为了使#box2 填满整个空间,您要确保它一直穿过。devtools 中的网格检查器将显示每个元素占用的行数。因此,不是 grid-column: span 5/6,而是 grid-column span 5/7。#box3 也是如此,它是 grid-row: span 4/6 而不是 grid-row: span 4/5;
.grid-container {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6,1fr);
background-color: #2196F3;
padding: 5px;
}
.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;
}
#box1 {
grid-column: 1 / span 4;
grid-row: 1 / span 2;
}
#box2 {
grid-column: 5 / 7;
grid-row: 1 / span 6;
}
#box3 {
grid-column: 1 / span 4;
grid-row: span 4 / span 6;
}
<div class="grid-container">
<div class="grid-item" id="box1">1</div>
<div class="grid-item" id="box2">2</div>
<div class="grid-item" id="box3">3</div>
</div>
推荐阅读
- javascript - Javascript while循环计数高于预期
- python - 在 Python 3.x 中使用 Pandas 根据列条件和特定列的值合并两个 DataFrame
- javascript - Prototype.js - $(...).next 不是函数
- node.js - npm 通过 gradle 任务在 docker for windows 中失败
- swift - 执行 segue 后,文本字段永久位于标签中
- jmc - Java Profiler JMC UI Dashboard 不显示在 Mac OS 上
- javascript - .map 中反应单选按钮的条件显示/隐藏
- android - 如何从xml将约束布局最小宽度设置为另一个视图的宽度
- c# - UWP:应用程序故障 1007 CStorageFileProxy 发布()
- jenkins - 使用 jenkins 设置 kubectl