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

Question

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

Mag*_*nus 7 html css css-grid

我一直在阅读CSS Tricks 上的CSS 网格教程，但一个基本方面让我有点困惑。

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

grid-template-areagrid-area使用为具有属性的网格项指定的名称
使用grid-column-start/end和grid-row-start/end

看看下面的测试代码，似乎的大小grid items是按以下顺序决定的（其中左侧的值覆盖右侧的值）：

grid-row/column-start/end>>grid-template-area物品本身的尺寸

问题

我的上述顺序通常是正确的吗？
是否有指定大小grid items（即它们跨越多少个单元格）的首选方法（上面的 1 或 2）？

代码

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

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mic*_*l_B 8

使用该grid-template-areas属性，您只能使用矩形网格区域。

有了grid-column-*和grid-row-*属性，您将拥有更大的灵活性。

您grid-template-areas只能在显式网格内创建网格区域。

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

更改网格模板列会破坏布局

Answer 2

Tem*_*fif 4

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

\n

更准确地说，有 3 种放置物品的方法。从规格来看：

\n

\n
网格容器的内容被组织成单独的网格项（类似于弹性项），然后将其分配给网格中的预定义区域。它们可以通过 grid-placement属性使用坐标显式放置，也可以使用 auto-placement 隐式放置到空白区域。\xc2\xa78 放置网格项目
\n

\n

因此，要么考虑面积、坐标，要么将工作留给浏览器进行自动放置。基本上你只能使用一种方法。

\n

请注意，这是显式grid-area放置的简写属性，也可以替换为grid-row-start; grid-column-star; grid-row-end; grid-column-end;

\n
下面用一个简单的例子来说明：
\n
\r\n
\r\n
.grid {\n display:inline-grid;\n grid-template-areas:\n "a b"\n "c d";\n grid-gap:20px;\n border:1px solid;\n}\nspan {\n width:50px;\n height:50px;\n background:red;\n}\n.one > span {\n grid-area:a;\n grid-row-start:1;\n grid-row-end:3;\n grid-column-start:1;\n grid-column-end:3;\n}\n.two > span {\n grid-row-start:1;\n grid-row-end:3;\n grid-column-start:1;\n grid-column-end:3;\n grid-area:a;\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<div class="grid one">\n <span></span>\n</div>\n\n<div class="grid two">\n <span></span>\n</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n
\n
您可以清楚地看到，由于顺序的原因，我们得到了不同的结果。这是合乎逻辑的，因为我们正在重写属性。没有任何订单，但您的商品只会考虑一种配置。
\n
您可以检查第二个元素，您将得到如下计算值：
\n
\n
您将找不到名为的属性，grid-area就像您找不到名为background、margin等的属性一样border，因为所有属性都将被普通符号替换。
\n
\n
考虑到尺寸，您应该区分轨道的尺寸和物品的尺寸。在前面的示例中，我们没有定义任何显式尺寸，因此项目宽度/高度也将定义轨道的尺寸。
\n
您可以使用不同的属性显式设置轨道大小grid-template-columns grid-template-rows，您会注意到网格项的大小并不总是遵循轨道的大小，我们可能会溢出：
\n
\r\n
\r\n
.grid {\n display:inline-grid;\n grid-template-columns:150px 150px;\n grid-template-areas:\n "a b"\n "c d";\n grid-gap:20px;\n border:1px solid;\n}\nspan {\n width:50px;\n height:50px;\n background:red;\n grid-area:a;\n}\n.one > span {\n width:400px;\n}\n.two > span {\n width:100%;\n}\n\n.three > span {\n width:200%;\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<div class="grid one">\n <span></span>\n</div>\n\n<div class="grid two">\n <span></span>\n</div>\n\n<div class="grid three">\n <span></span>\n</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n
\n
我们已经定义了轨道大小150px，如果项目更大，我们就会发生溢出。您还会注意到 percetange 的行为方式，因为轨道将是网格项的包含块而不是网格容器。
\n
使用开发工具你可以清楚地看到轨迹：
\n
\n
例如，如果您考虑1fr单位，auto则元素的宽度将用于定义尺寸：
\n
\r\n
\r\n
.grid {\n display:inline-grid;\n grid-template-columns:1fr 150px;\n grid-template-areas:\n "a b"\n "c d";\n grid-gap:20px;\n border:1px solid;\n}\nspan {\n width:50px;\n height:50px;\n background:red;\n grid-area:a;\n}\n.one > span {\n width:400px;\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<div class="grid one">\n <span></span>\n</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n
\n
\n
所以我们可以识别 4 种情况¹：
\n
\n
未定义项目大小和未定义轨道大小：每个项目的内容将用于定义项目和轨道大小。
\n
项目大小未定义且轨道大小已定义：项目将被拉伸以填充轨道大小（根据项目的内容，我们可能会溢出）。
\n
项目尺寸定义和轨道尺寸定义：两者之间没有尺寸关系，我们只需将项目放置在轨道内即可。轨道内可以有溢出空间或空白空间。
\n
已定义项目尺寸且未定义轨道尺寸：项目尺寸将决定轨道尺寸。根据具体情况，不会定义，但会在计算中考虑。（例如这里：https ://stackoverflow.com/a/54639430/8620333 ）
\n
\n
\n
^{1：这非常简化，使思考更加清晰。大小调整算法更为复杂。}
\n

归档时间：	6 年，10 月前
查看次数：	2800 次
最近记录：	4 年，4 月前