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

【问题标题】：Relation between grid-template-areas and grid-template columns网格模板区域和网格模板列之间的关系
【发布时间】：2020-02-04 11:55:15
【问题描述】：

我是编码新手，似乎没有正确理解 CSS 网格模型。在下面的代码中，网格分为 3 个网格模板列（每个 300 像素），但是网格模板区域中每行有 8 个单元（例如：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";
}

【问题讨论】：

为了您更好地理解和清除概念，请查看bitsofco.de/…。
你从哪里得到这个代码？使用时必须检查一下会发生什么？

标签： css css-grid

【解决方案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/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，为行使用50px 60px 20px。

【讨论】：

非常感谢！对我来说，这似乎仍然不是一个好习惯，但多亏了你，我才明白。

【解决方案2】：

前三个hd 列的宽度为 300 像素。

其余五个 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。

【讨论】：