网格模板区域：none vs 网格模板区域：点？

Question

csstricks says，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: .有什么区别？

Answer 1

来自 the specification:

Name: grid-template-areas

Value: none | <string>+

Initial: none

none 是一个独立的值 (grid-template-areas:none)，而不是像 grid-template-areas:" none one" 那样使用的值。后者将属于 <string>+ 并且 "none" 将成为命名区域并且不同于 .

A sequence of name code points, representing a named cell token with a name consisting of its code points.

A sequence of one or more "." (U+002E FULL STOP), representing a null cell token.

下面，我在"none"区域放置6个

.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>

这就是说，您的示例不会显示任何差异，因为您明确将所有项目放置为“none”和“。”在所有情况下都将保持为空。你可以放任何东西，结果都是一样的。

网格模板区域：none vs 网格模板区域：点？

grid-template-areas: none vs grid-template-areas: dot?

html

css

css-grid