为什么网格不留下标有“。”的单元格空吗

Question

我的尝试

#mygrid {
  border:1px solid black;
  width:160px;
  display:grid;
  grid-template-columns: 40px 40px 40px 40px;
  grid-template-areas: "a . . b";
}

<div id = "mygrid">
  <div>hello</div>
  <div>there</div>
</div>

不是应该在最后一个单元格中放置“那里”，因为应该将两个中间的单元格留空吗？

Answer 1

如果要将hello放置在a区域并将there放置在b区域。做

#mygrid {
  border:1px solid black;
  width:160px;
  display:grid;
  grid-template-columns: 40px 40px 40px 40px;
  grid-template-areas: "a . . b";
}

/* Placing to grid areas */

#mygrid div:first-child {
  grid-area: a;
}

#mygrid div:last-child {
  grid-area: b;
}

<div id = "mygrid">
  <div>hello</div>
  <div>there</div>
</div>

Answer 2

您已经定义了4列，因此浏览器将填充从第一列开始的所有列，并且不会跳转由.定义的中间列，除非您明确说明告诉它这样做。

如果要模拟这种行为，您可以简单地定义2列并依靠空白：

#mygrid {
  border: 1px solid black;
  width: 160px;
  display: grid;
  grid-template-columns: 40px 40px;
  grid-column-gap: 80px;
  grid-template-areas: "a  b";
}

<div id="mygrid">
  <div>hello</div>
  <div>there</div>
</div>

另一种想法是依靠一个空元素来填充这些列：

#mygrid {
  border: 1px solid black;
  width: 160px;
  display: grid;
  grid-template-columns: 40px 40px 40px 40px;
  grid-template-areas: "a i i b";
}

#mygrid:before {
  content:"";
  grid-area:i;
}

<div id="mygrid">
  <div>hello</div>
  <div>there</div>
</div>