css - CSS Grid 和 min-content/auto
问题描述
所以我试图用 CSS 网格创建下面的图像。min-content 和 auto 似乎不太好。这是一个小提琴!https://jsfiddle.net/pw9L52h0/
HTML:
<div class="grid">
<div class="label-1">label 1</div>
<div class="label-2">label 2</div>
<div class="label-3">label 3</div>
<div class="label-4">label 4</div>
<div class="label-5">label 5</div>
<div class="label-6">label 6</div>
<div class="label-7">label 7</div>
</div>
CSS:
.grid {
display: grid;
grid-template-rows: 60px min-content auto;
grid-template-columns: 60px min-content auto;
width: 230px;
height: 230px;
background-color: lightgray;
}
.label-1 {
grid-row-start: 0;
grid-row-end: 1;
grid-column-start: 0;
grid-column-end: 1;
background-color: red;
}
.label-2 {
grid-row-start: 0;
grid-row-end: 1;
grid-column-start: 1;
grid-column-end: 3;
background-color: green;
}
.label-3 {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 0;
grid-column-end: 1;
background-color: blue;
}
.label-4 {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
background-color: yellow;
}
.label-5 {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 3;
background-color: orange;
}
.label-6 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 2;
background-color: pink;
}
.label-7 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
background-color: purple;
}
它最终是这样的:
解决方案
在只需要几行代码的情况下,您过于复杂,如下所示:
.grid {
display: grid;
grid-template-rows: 60px min-content auto;
grid-template-columns: 60px min-content auto;
width: 230px;
height: 230px;
background-color: lightgray;
}
.label-1 {
background-color: red;
}
.label-2 {
grid-column:span 2; /* this */
background-color: green;
}
.label-3 {
grid-row:span 2; /* and this */
background-color: blue;
}
.label-4 {
background-color: yellow;
}
.label-5 {
background-color: orange;
}
.label-6 {
background-color: pink;
}
.label-7 {
background-color: purple;
}
<div class="grid">
<div class="label-1">label 1</div>
<div class="label-2">label 2</div>
<div class="label-3">label 3</div>
<div class="label-4">label 4</div>
<div class="label-5">label 5</div>
<div class="label-6">label 6</div>
<div class="label-7">label 7</div>
</div>
您的代码的主要问题是您从0
需要从哪里开始计数1
。3 列表示 4 行 (1,2,3,4)。
您可以在控制台中清楚地看到grid-start-* = 0
无效,grid-end-* = 1
并将元素的末尾放在第一行,在开头创建一个隐式的新列/行,因此您将结束 4 列/行:
这是您使用正确数字修复的代码:
.grid {
display: grid;
grid-template-rows: 60px min-content auto;
grid-template-columns: 60px min-content auto;
width: 230px;
height: 230px;
background-color: lightgray;
}
.label-1 {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
background-color: red;
}
.label-2 {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 4;
background-color: green;
}
.label-3 {
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 2;
background-color: blue;
}
.label-4 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
background-color: yellow;
}
.label-5 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 3;
grid-column-end: 4;
background-color: orange;
}
.label-6 {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 3;
background-color: pink;
}
.label-7 {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 3;
grid-column-end: 4;
background-color: purple;
}
<div class="grid">
<div class="label-1">label 1</div>
<div class="label-2">label 2</div>
<div class="label-3">label 3</div>
<div class="label-4">label 4</div>
<div class="label-5">label 5</div>
<div class="label-6">label 6</div>
<div class="label-7">label 7</div>
</div>
推荐阅读
- c++ - 从文本文件c ++填充对象
- powershell - 有条件地将输出写入文件以跟踪 pourposes
- c# - Uri 方案太长 – AppSettings.config
- database - 从 Oracle 云存储读取数据到目标数据库
- c# - 如何查找 String 中是否有特殊字符?前任 : ” ] ”
- git - 我可以从不同的分支中挑选多个提交吗?
- apache-nifi - 如何使用 Apache Nifi 将数据从 HDFS 传输到 Oracle?
- angular - Angular:将类型字符串返回到 catchError 但具有不同类型的 HTTP
- reactjs - 可重用组件静态图像不会加载到不同的路由上
- node.js - 从 `prom-client` 模块导入 `prom` 丢失但已安装。我怎样才能相应地`import prom-client`?