html - 网格模板区域:无 vs 网格模板区域:点?
问题描述
csstricks 说,我们有三个属性值grid-template-areas
,其中两个是.
和none
。我看不出方式有任何区别.
并none
影响网格。请参阅以下内容:
.grid-container {
display: grid;
grid-template-areas: "one none two three"
"four five . six" ;
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;
}
.item1 {
grid-area: one;
}
.item2 {
grid-area: two;
}
.item3 {
grid-area: three;
}
.item4 {
grid-area: four;
}
.item5 {
grid-area: five;
}
.item6 {
grid-area: six;
}
<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 class="item6">6</div>
</div>
正如您在上面看到的.
,none
两者都在网格中留下空块。我也在MDN上搜索过,但没有解释差异。所以,
grid-template-areas: none
和 和有什么不一样grid-template-areas: .
?
解决方案
从规范:
名称:网格模板区域
值:无 |
<string>+
初始:无
none
是一个自身的值 ( grid-template-areas:none
),而不是像 . 那样使用的值grid-template-areas:" none one"
。后者将属于<string>+
并且"none"
将成为一个命名区域并且不同于.
一系列名称代码点,表示具有由其代码点组成的名称的命名单元标记。
一个或多个“.”的序列 (U+002E FULL STOP),表示一个空单元标记。
下面,我将 6 放置在"none"
区域
.grid-container {
display: grid;
grid-template-areas: "one . two three"
"four five none six" ;
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;
}
.item1 {
grid-area: one;
}
.item2 {
grid-area: two;
}
.item3 {
grid-area: three;
}
.item4 {
grid-area: four;
}
.item5 {
grid-area: five;
}
.item6 {
grid-area: none;
}
<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 class="item6">6</div>
</div>
这就是说,您的示例将没有区别,因为您明确地将所有项目放置为“无”和“。” 在所有情况下都将保持为空。你可以把任何东西放在那里,结果是一样的。
推荐阅读
- javascript - 如何在路线中包含可选航段?
- javascript - 通过 $emit 选择所有复选框不会重新渲染视图 - Vuejs
- mysql - 仅显示来自每个对话的最新消息
- django - 在 django 模板标签中获取 request.path
- java - 将数据发布到服务器时出现 Android Volley 错误
- stm32 - STM32F303C8代码没有进入while循环
- xquery - XQuery 切换测试节点
- sql - SQL Server - 当我加入的表比我正在更新的表有更多行时,使用基于内部连接的 CASE 更新列
- ffmpeg - ffmpeg 无法播放代理 Avid Interplay
- android - android - 在 ViewModel 类中使用新线程