我有一個網格，基本上我需要能夠在容器代碼中定義項目的位置，為了使它更清晰，下面是我當前的代碼看起來像這樣:

<style>
.angry-grid {
   display: grid; 

   grid-template-rows: 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   
   gap: 0px;
   height: 100%;
   
}
  
#item-0 {

   background-color: #689779; 
   grid-row-start: 1;
   grid-column-start: 3;

   grid-row-end: 2;
   grid-column-end: 4;
   
}
#item-1 {

   background-color: #9D7F5B; 
   grid-row-start: 2;
   grid-column-start: 5;

   grid-row-end: 3;
   grid-column-end: 6;
   
}
#item-2 {

   background-color: #C756BB; 
   grid-row-start: 2;
   grid-column-start: 1;

   grid-row-end: 3;
   grid-column-end: 2;
   
}
#item-3 {

   background-color: #BDE79B; 
   grid-row-start: 3;
   grid-column-start: 4;

   grid-row-end: 4;
   grid-column-end: 5;
   
}
#item-4 {

   background-color: #5F97A5; 
   grid-row-start: 3;
   grid-column-start: 2;

   grid-row-end: 4;
   grid-column-end: 3;
   
}
</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>

我需要在容器代碼中定義項目的位置(myGrid {...})，希望夠清楚。

在本例中，它應該是這樣的:

你不能。CSS使用選擇器來選擇元素，并且CSS的任何部分都不使用選擇器來選擇規則集中的值。

最接近的方法是使用網格模板區域來命名網格區域。您仍然需要為要放入這些區域的每個元素編寫一個選擇器。

正如quentin所說，最好的辦法是使用網格模板區域來定義子元素在網格布局中的位置。 有多種在線資源可以幫助您創建您想要的布局。

我用這個工具花了大約30秒來創建這個布局: https://cssgrid-generator.netlify.app/

對于更高級的布局，我通常使用這個: https://grid.layoutit.com/

.parent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  max-width: 500px;
}

.parent div {
  height: 100px;
  width: 100%;
}

.div1 { grid-area: 1 / 3 / 2 / 4; background-color: red; }
.div2 { grid-area: 2 / 1 / 3 / 2; background-color: green; }
.div3 { grid-area: 3 / 2 / 4 / 3; background-color: violet; }
.div4 { grid-area: 3 / 4 / 4 / 5; background-color: tomato; }
.div5 { grid-area: 2 / 5 / 3 / 6; background-color: yellow; }

<div class="parent">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="div5"></div>
</div>