Question

我是编码新手，似乎无法正确理解CSS Grid模型。在下面的代码中，网格分为3个网格模板列（每个300px），但是网格模板区域中的每行有8个单位（例如：hd hd hd hd hd hd hd hd hd hd），而不是3这对我来说没有意义。有人可以帮我理解为什么网格模板区域中的单位数与列数不同吗？（因此，如果有3列，则为“ hd hd hd”）。他们有什么关系？

.container {
    display:grid;
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 250px 600px;
    grid-template-areas: 
    "hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main"
    "ft ft ft ft ft ft ft ft";
}

Answer 1

通过定义模板区域，您定义了一个包含8x3项目的网格。默认情况下，这些项目将具有自动宽度和自动高度，如下所示：

.container {
    display:grid;
    grid-template-areas: 
    "hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main"
    "ft ft ft ft ft ft ft ft";
    border:1px solid;
}

<div class="container">

</div>

高度将为0，因为没有内容，并且容器的宽度将在8列上平均分配。

如果添加模板列/行，则将明确定义网格轨道的宽度/高度。通过在grid-template-columns内仅定义3个数字，您将只为前3列定义一个宽度，而另一列将保持auto。与grid-template-rows

的逻辑相同

.container {
    display:grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 60px;
    grid-template-areas: 
    "hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main"
    "ft ft ft ft ft ft ft ft";
    border:1px solid;
}

<div class="container">

</div>

如果考虑上述代码，则列将使用50px 50px 50px auto auto auto auto auto，行将使用50px 60px auto。

更准确地说，这是分隔符的描述：

显式网格的大小由grid-template-areas定义的行/列数和grid-template-rows /定义的行/列数中的较大者确定。 grid-template-columns。由grid-template-areas定义但未由grid-template-rows / grid-template-columns设置大小的任何行/列均采用grid-auto-rows / grid-auto-columns属性的大小。 ^ref

您可以清楚地看到，我们陷入了行/列的大小未按grid-template-rows / grid-template-columns的情况，因此它们的大小将由grid-auto-rows / {{ 1}}，其中默认值设置为grid-auto-columns

您可以调整该值以获得不同的结果：

auto

.container {
    display:grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 60px;
    grid-auto-columns:10px;
    grid-auto-rows:20px;
    grid-template-areas: 
    "hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main"
    "ft ft ft ft ft ft ft ft";
    border:1px solid;
}

上面的代码将在列中使用<div class="container"> </div>，在行中使用50px 50px 50px 10px 10px 10px 10px 10px。

Answer 2

前三个hd列的宽度为300px。

其余五个hd列将默认为内容宽度（auto）。

grid-template-columns属性顺序设置列的宽度。因此，前三列的宽度为300px。

剩余的hd列在grid-template-columns中没有设置相应的宽度，因此实际上是width: auto。更具体地说，是在grid-template-areas中定义但未由grid-template-columns，are governed by grid-auto-columns设置大小的列，其默认设置为auto。

网格模板区域和网格模板列之间的关系

2 个答案: