html - 网格模板区域 - 显示问题
问题描述
我是 CSS Grid 的新手,现在我正在玩它。我想制作 4x4 网格模板。
在我的代码中,此网格显示不正确 - 问题出在Table_4
. 为什么显示不正确?你们能告诉我我做错了什么吗?
body {
background-color: gray;
}
.grid {
display: grid;
width: 100%;
height: 250px;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
"item-a item-a item-a item-a"
"item-b . . ."
"item-b . . ."
"item-b . . .";
}
.item-a {
grid-area: item-a;
background-color: lightcoral;
text-align: center;
}
.item-b {
grid-area: item-b;
background-color: lightblue;
text-align: center;
}
.item-c {
grid-area: item-c;
background-color: lightcyan;
text-align: center;
}
.item-d {
grid-area: item-d;
background-color: lightgreen;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../sources/css/style.css">
</head>
<body>
<div class="grid">
<div class="item-a">Table_1</div>
<div class="item-b">Table_2</div>
<div class="item-c">Table_3</div>
<div class="item-d">Table_4</div>
</div>
</body>
</html>
解决方案
您需要在网格模板区域中列出 item-c:
body {
background-color: gray;
}
.grid {
display: grid;
width: 100%;
height: 250px;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: "item-a item-a item-a item-a" "item-b item-c item-c item-c" "item-b item-c item-c item-c" "item-d item-d item-d item-d";
}
.item-a {
grid-area: item-a;
background-color: lightcoral;
text-align: center;
}
.item-b {
grid-area: item-b;
background-color: lightblue;
text-align: center;
}
.item-c {
grid-area: item-c;
background-color: lightcyan;
text-align: center;
}
.item-d {
grid-area: item-d;
background-color: lightgreen;
text-align: center;
}
<div class="grid">
<div class="item-a">Table_1</div>
<div class="item-b">Table_2</div>
<div class="item-c">Table_3</div>
<div class="item-d">Table_4</div>
</div>
推荐阅读
- .net - Ghostscript 9.23 和 unicode 文件名(Windows)
- c# - Identityserver4 API 身份验证未按预期工作
- c++ - yaml-cpp 编译错误:“未定义对 YAML::LoadFile 的引用”
- javascript - 理解这个语法 if(obj[x])
- ios - Facebook 无法检索 iPhone 商店 ID
- python - 尝试在 Kivy 中播放 GIF 时出现白色背景
- python - 增加 numpy 矩阵中低于某个索引的值
- cmake - 如何使用 findpackage 在 cmake 中添加 dlib?
- php - 两个脚本上的 PHP 致命错误
- ssms - ssms --- 如何使用另一台服务器上的 2 个表在一台服务器上创建一个表