网格模板区域和网格模板列之间的关系 [英] Relation between grid-template-areas and grid-template columns

问题描述

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

I am new to coding and don't seem to understand the CSS Grid model correctly. In the code below the grid is divided into 3 grid-template-columns (300px each) but then there are 8 units per row in the grid-template-areas (for example: hd hd hd hd hd hd hd hd) and not 3 which does not make sense to me. Can somebody please help me understand why the number of units in the grid-template-area is not the same as the number of columns? (so it would be "hd hd hd" if there are 3 columns). What is their relation?

.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";
}

推荐答案

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

By defining your template-areas you defined a grid with 8x3 items. By default those items will have an auto width and and auto height like below:

.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列上平均分配.

The height will be 0 since there is no content and the width of your container will be splitted equally on the 8 columns.

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

If you add template-columns/rows you will explicitely define the width/height of the grid tracks. By defining only 3 numbers inside grid-template-columns you will define a width for only the first 3 columns and the other one will remain auto. Same logic with 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 ，行的 50px 60px auto .

If I consider the above code, you will have 50px 50px 50px auto auto auto auto auto for the columns and 50px 60px auto for the rows.

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

To be more accurate, here is the description for the sepcification:

显式网格的大小由 grid-template-areas 定义的较大的行/列数和大小确定的行/列数确定通过 grid-template-rows / grid-template-columns .由 grid-template-areas 定义但未由 grid-template-rows / grid-template-columns 设置大小的任何行/列均采用其大小来自 grid-auto-rows / grid-auto-columns 属性. ^参考

The size of the explicit grid is determined by the larger of the number of rows/columns defined by grid-template-areas and the number of rows/columns sized by grid-template-rows/grid-template-columns. Any rows/columns defined by grid-template-areas but not sized by grid-template-rows/grid-template-columns take their size from the grid-auto-rows/grid-auto-columns properties. ^ref

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

As you can clearly see, we are falling into the case where we have rows/columns not sized by grid-template-rows/grid-template-columns so their size will be defined by grid-auto-rows/grid-auto-columns where the default valus is set to auto

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

You can adjust the value to get a different result:

.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 10px ，对行使用 50px 60px 20px 20px .

The above code will give use 50px 50px 50px 10px 10px 10px 10px 10px for the columns and 50px 60px 20px for the rows.

这篇关于网格模板区域和网格模板列之间的关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！