如何在CSS网格容器代码内定义网格项的位置？

你可以使用CSS Grid的grid-template-areas属性，把所有网格项的布局规则集中写在网格容器.angry-grid内，无需单独为每个网格项设置grid-row-start/grid-column-start等属性。修改后的代码如下：

<style>
.angry-grid {
   display: grid; 
   grid-template-rows: 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   /* 用grid-template-areas定义布局，每个占位符对应网格位置，.代表空白区域 */
   grid-template-areas:
      ". . item-0 . ."
      "item-2 . . . item-1"
      ". item-4 . item-3 .";
   gap: 0px;
   height: 100%;
}
  
#item-0 {
   background-color: #689779; 
   grid-area: item-0; /* 关联容器中定义的区域名称 */
}
#item-1 {
   background-color: #9D7F5B; 
   grid-area: item-1;
}
#item-2 {
   background-color: #C756BB; 
   grid-area: item-2;
}
#item-3 {
   background-color: #BDE79B; 
   grid-area: item-3;
}
#item-4 {
   background-color: #5F97A5; 
   grid-area: item-4;
}
</style>

<div class="angry-grid">
  <div id="item-0">&nbsp;</div>
  <div id="item-1">&nbsp;</div>
  <div id="item-2">&nbsp;</div>
  <div id="item-3">&nbsp;</div>
  <div id="item-4">&nbsp;</div>
</div>

关键说明： #

• grid-template-areas通过字符串模拟网格布局：每一行对应一个字符串，每个空格分隔的单词代表一个网格区域，.代表空白的网格单元格，完全匹配你预期的布局。
• 每个网格项通过grid-area属性绑定容器中定义的区域名称，实现位置匹配。
• 保留了原有的背景色设置，仅移除了分散的位置控制属性，布局效果和原代码完全一致。

内容的提问来源于stack exchange，提问作者Mazen Mamdouh