网格属性，而不是网格行和网格列

Question

根据MDN Web文档，gridCSS属性是一个简写属性，它在一个声明中设置所有显式和隐式网格属性。我想知道我们如何使用它来代替grid-row&grid-column在以下示例代码中，因此可以进一步缩短：

.grid-container {
display: grid;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item3 {
grid-column: 2;
grid-row: 1 / 3;
}

<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>

Answer 1

您正在寻找grid-area。grid用于集装箱

.grid-container {
display: grid;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item3 {
/*grid-column: 2;
grid-row: 1 / 3;*/
grid-area: 1 / 2 / 3 /auto; 
/* row-start / column-start / row-end / column-end */
}

<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>

Answer 2

不，这不是它的目的。简写代替了网格容器上的grid-template-columns和grid-template-rows。

Answer 3

网格属性是以下内容的简写：

• 网格自动列
• 网格自动流动
• 网格自动行
• 网格模板区域
• 轴网模板列
• 网格模板行

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/grid此属性用于定义网格本身，因此您可以将其添加到网格容器中，而不是添加到其子对象中。

您可以使用网格区域缩短第3项中的语句，这是的缩写

• 网格行启动

• 网格列启动

• 网格行端

• 网格列端

  所以第3项可以设计为：

  .第3项{网格面积：1/2/3；}