Question

我在CSS Tricks上读过CSS Grid tutorial，但是一个基本方面使我有些困惑。

似乎有两种方法可以确定网格项跨越多少个单元格：

grid-template-area使用具有grid-area属性的网格项目名称
使用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，您只能在显式网格内创建网格区域。

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

Changing grid template columns breaks layout

Answer 2

似乎有两种方法可以确定网格项跨越多少个单元格：

更精确地说，有3种放置物品的方法。来自the specification：

网格容器的内容被组织成单独的网格项目（类似于弹性项目），然后被分配给网格中的预定义区域。可以通过网格放置属性使用坐标明确地放置它们，或者使用自动放置将其隐式放置到空白区域。 §8放置网格项

因此，您可以考虑区域，坐标或将作业留在浏览器中进行自动放置。基本上，您只能使用一种方法。

请注意，grid-area是 explicit 位置的简写属性，也可以由grid-row-start; grid-column-star; grid-row-end; grid-column-end;

代替

这是一个简单的例子来说明：

.grid {
  display:inline-grid;
  grid-template-areas:
    "a b"
    "c d";
  grid-gap:20px;
  border:1px solid;
}
span {
  width:50px;
  height:50px;
  background:red;
}
.one > span {
  grid-area:a;
  grid-row-start:1;
  grid-row-end:3;
  grid-column-start:1;
  grid-column-end:3;
}
.two > span {
  grid-row-start:1;
  grid-row-end:3;
  grid-column-start:1;
  grid-column-end:3;
  grid-area:a;
}

<div class="grid one">
  <span></span>
</div>

<div class="grid two">
  <span></span>
</div>

您可以清楚地看到由于订购，我们得到的结果有所不同。这是合乎逻辑的，因为我们要覆盖属性。因此，没有订单，但您的商品仅考虑一种配置。

您可以检查第二个元素，您将获得如下所示的计算值：

您将找不到名为grid-area的属性，就像您找不到名为background，margin，border等的属性一样，因为所有这些都将被替换为正手符号。

考虑到大小，您应该在轨道的大小和项目的大小之间进行区别。在前面的示例中，我们没有定义任何显式的大小，因此项目的宽度/高度也将定义轨道的大小。

您可以使用grid-template-columns grid-template-rows之类的不同属性来显式设置tracl的大小，您会注意到网格项的大小并不总是跟随轨道的大小，并且我们可能会溢出：

.grid {
  display:inline-grid;
  grid-template-columns:150px 150px;
  grid-template-areas:
    "a b"
    "c d";
  grid-gap:20px;
  border:1px solid;
}
span {
  width:50px;
  height:50px;
  background:red;
  grid-area:a;
}
.one > span {
  width:400px;
}
.two > span {
  width:100%;
}

.three > span {
  width:200%;
}

<div class="grid one">
  <span></span>
</div>

<div class="grid two">
  <span></span>
</div>

<div class="grid three">
  <span></span>
</div>

我们已将磁道大小定义为150px，如果的项目较大，我们只会发生溢出。您还将注意到percetange的行为，因为轨道将是网格项目的包含块，而不是网格容器。

使用开发人员工具，您可以清楚地看到曲目：

例如，如果您考虑使用1fr单位或auto，则元素的宽度将用于定义尺寸：

.grid {
  display:inline-grid;
  grid-template-columns:1fr 150px;
  grid-template-areas:
    "a b"
    "c d";
  grid-gap:20px;
  border:1px solid;
}
span {
  width:50px;
  height:50px;
  background:red;
  grid-area:a;
}
.one > span {
  width:400px;
}

<div class="grid one">
  <span></span>
</div>

所以我们可以识别出4种情况¹：

项目大小未定义和轨道大小未定义：每个项目的内容将用于定义项目和轨道大小。
项目大小未定义和已定义的轨道大小：该项目将被拉伸以填充轨道大小（根据项目的内容，我们可能会溢出）。
项目尺寸已定义和轨道尺寸已定义：两者之间没有尺寸关系，我们只需将项目放置在轨道内即可。轨道内可能有溢出或空白。
已定义的项目大小和未定义的轨道大小：项目大小将决定轨道的大小。根据情况，它不会定义它，但是会在计算中考虑它。（例如：https://stackoverflow.com/a/54639430/8620333）

^{1：这使得简化思考变得非常简单。大小调整算法更加复杂。}

CSS网格：网格行/列开始/结束VS网格区域+网格模板区域

2 个答案: