html - CSS“网格模板区域”无法按预期工作
问题描述
我认为当我在属性.
内键入(空白字段)时,会显示在字段内。但是它显示在场内。为什么它会这样工作?grid-template-areas
.item5
under
.
body {
margin: 0;
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: content;
}
.item3 {
grid-area: left;
}
.item4 {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-columns: 300px 1fr;
grid-template-areas: "header header"
"content ."
"left ."
"footer footer"
"under under";
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
解决方案
从规范:
一个或多个“.”的序列 (U+002E FULL STOP),表示一个空单元标记。
和
空单元标记表示网格容器中的未命名区域。
未命名区域并不意味着不能将项目放置在那里。它只是意味着未命名,自动放置算法将从上到下开始,因此第一个空白区域item5
是未命名区域。
您可以在此处遵循完整的算法:https ://www.w3.org/TR/css-grid-1/#auto-placement-algo在这里您会发现没有关于未命名区域或命名区域的限制。如果您item5
一个人,它将被放入第一行/列(名为“标题”的那个)
body {
margin: 0;
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: content;
}
.item3 {
grid-area: left;
}
.item4 {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-columns: 300px 1fr;
grid-template-areas: "header header"
"content ."
"left ."
"footer footer"
"under under";
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class="grid-container">
<div class="item5">5</div>
</div>
相关问题,我将在其中对放置算法进行更详细的解释:
推荐阅读
- spring - Spring ClassPathXmlApplicationContext 无法加载 xml
- haskell - Haskell List Comprehension 和 List Monad
- sqlite - Sqlite 选择最近 5 分钟内插入或更新的记录
- c# - 无法使用 Entity Framework Core 更新数据库
- dataframe - 如何从匹配的两个 DataFrame 中获取记录列表?
- javascript - 计算对象数组中的重复项并对对象中的值求和
- php - Laravel 查看未定义变量:sand_cmonths,我是 laravel 和 PHP 的新手
- rdf - 指定属性数据类型——使用 SHACL、rdfs:range 还是自定义属性?
- python - 在 Python 中随机迭代(可能)巨大的位序列空间
- python - 是否可以在 Django 中的另一个模型中重用来自一个模型的注释?