CSS网格：网格行/列开始/结束VS网格区域+网格模板区域 [英] CSS Grid: grid-row/column-start/end VS grid-area + grid-template-area
问题描述
我一直在阅读
您将找不到名为<$ c的属性$ c>网格区域，就像您找不到名为背景，保证金，边界等，因为所有这些都将被手写符号代替。
考虑到大小，您应该在轨道的大小和项目的大小之间进行区别。在前面的示例中，我们没有定义任何明确的大小，因此项目的宽度/高度也将定义轨道的大小。
您可以使用以下方式明确设置轨道大小不同的属性，例如 grid-template-columns grid-template-rows ，您会注意到网格项的大小并不总是遵循轨道的大小，我们可能会溢出：
.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;高度：50px;背景：红色； grid-area：a;}。one> span {width：400px;}。two> span {width：100％;}。三> span {width：200％;}
< div类=网格一个> < span> / span< / div>< div class =网格二> < span> / span< / div>< div class =网格三> < 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;高度：50px;背景：红色； grid-area：a;}。one> span {width：400px;}
< div class = 网格一> < span>< / span>< / div>
因此我们可以识别出4种情况 1 ：
- 项目尺寸未定义和轨道尺寸未定义：每个项目的内容将用于定义项目和轨道尺寸。
- 项目尺寸未定义和轨道尺寸已定义：将拉伸该项目以填充轨道尺寸（根据项目的内容，我们可能会溢出）。
- 项目大小已定义和磁道大小已定义：没有两者之间的尺寸关系，我们只需将项目放置在轨道内即可。
- 项目尺寸已定义和轨道尺寸未定义：项目尺寸将决定轨道的大小。根据情况，它不会定义它，但是会在计算中考虑它。 （例如： https://stackoverflow.com/a/54639430/8620333 ）
1：简化思考的过程非常简单。大小调整算法更加复杂。
I have been reading through the CSS Grid tutorial at CSS Tricks, but one basic aspect confused me a bit.
There seems to be two ways of deciding how many cells a grid item spans:
grid-template-areausing names given to grid items with thegrid-areaproperty- Using
grid-column-start/endandgrid-row-start/end
Looking at my test code below, it seems the sizes of the grid items are decided in the following order (where values to the left overwrites values to the right):
grid-row/column-start/end > grid-template-area > Size of items themselves
Question
- Is my above order generally correct?
- Is there a preferred way (1 or 2 above), of specifying the size of the
grid items(i.e. how many cells they span)?
Code
.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>
There seems to be two ways of deciding how many cells a grid item spans:
To be more precise there 3 ways to place items. From the specification:
The contents of the grid container are organized into individual grid items (analogous to flex items), which are then assigned to predefined areas in the grid. They can be explicitly placed using coordinates through the grid-placement properties or implicitly placed into empty areas using auto-placement. §8 Placing Grid Items
So either you consider area, coordinate or you leave the job to the browser for the auto placement. Basically you can use only one way.
Note that grid-area is the shorthand property for the explicit placement which can also be replace by grid-row-start; grid-column-star; grid-row-end; grid-column-end;
Here is a simple example to illustrate:
.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>
You can clearly see that we have a different result because of the order. This is logical since we are overriding properties. There isn't any order but only one configuration will be considered for your item.
You can inspect the second element and you will have the computed value like this:
You will not find a property called grid-area like you won't find a property called background, margin, border etc because all will get replaced by the longhand notation.
Considering the size, you should make the difference between the size of the tracks and the size of the items. In the previous example we didn't define any explicit size so the item width/height will also define the size of the track.
You can explicitely set the track sizes using different properties like grid-template-columns grid-template-rows and you will notice that grid item size will not always follow the size of the tracks and we may have overflow:
.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>
We have defined the track size to be 150px and if the item with is bigger we simply have an overflow. You will also notice how percetange will behave since the track will be the containing block of the grid item and not the grid container.
Using dev tools you can clearly see the tracks:
If for example you consider 1fr unit or auto then the width of the element will be used to define the sizes:
.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>
So we can identify 4 cases 1:
- item size not defined and track size not defined: The content of each item will be used to define the item and the track size.
- item size not defined and track size defined: The item will be stretched to fill the track size (we may have overflow depending on the content of the item).
- item size defined and track size defined: There is no size relation between both, we simply place the item inside the track. We can either have overflow or empty space inside the track.
- item size defined and track size not defined: The item size will dictate the track size. Depending on the cases, it will not define it but it will be considered in the caclulation. (ex here: https://stackoverflow.com/a/54639430/8620333)
1: this is very simplifed to make think more clear. The sizing algorithm is more complex.
这篇关于CSS网格：网格行/列开始/结束VS网格区域+网格模板区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
