html - CSS 网格 : grid-row/column-start/end VS grid-area + grid-template-area

Question

我一直在阅读 CSS Grid tutorial在 CSS Tricks 中，但一个基本方面让我有点困惑。

似乎有两种方法可以决定一个网格元素跨越多少个单元格:

grid-template-area使用赋予网格项的名称 grid-area属性(property)

使用 grid-column-start/end和 grid-row-start/end

看看我下面的测试代码，似乎 grid items 的大小按以下顺序决定(左边的值覆盖右边的值):
grid-row/column-start/end > grid-template-area > 元素本身的尺寸

问题

我上面的顺序一般正确吗？

是否有首选方法(上面的 1 或 2)指定 grid items 的大小(即它们跨越多少个单元格)？

代码

.container {
  display: grid;
  border: 1px solid green;
  grid-template-columns: 120px 120px 120px;
  grid-template-rows: 120px 120px 120px;
  grid-template-areas: "item-1 item-1 item-2" "item-3 item-4 item-4" "item-5 item-6 .";
}

.item-1 {
  border: 1px solid blue !important;
  grid-area: item-1;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 1;
}

.item-2 {
  grid-area: item-2;
}

.item-3 {
  grid-area: item-3;
}

.item-4 {
  grid-area: item-4;
}

.item-5 {
  grid-area: item-5;
}

.item-6 {
  grid-area: item-6;
}

.box {
  border: 1px solid red;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

<div class="container">
  <div class="item-1 box">Box1</div>
  <div class="item-2 box">Box2</div>
  <div class="item-3 box">Box3</div>
  <div class="item-4 box">Box4</div>
  <div class="item-5 box">Box5</div>
  <div class="item-6 box">Box6</div>
</div>

Answer 1

使用 grid-template-areas 属性，您仅限于矩形网格区域。

使用 grid-column-* 和 grid-row-* 属性，您可以获得更大的灵活性。

grid-template-areas with ASCII art is not working

Grid areas not laying out properly in CSS Grid

使用 grid-template-areas 您只能在显式网格内创建网格区域。

使用 grid-column-* 和 grid-row-* 您可以走出显式网格，在隐式网格中创建网格区域。

Changing grid template columns breaks layout