我正試圖將我的第二個網格項目跨越兩行。

我能夠使用grid-row: span 2語法實現我所尋找的東西。然而，我希望使用grid-row: x/y語法獲得相同的結果，其中x和y是數值。

問題是，第二種語法產生了意想不到的結果。 有人能幫我理解我做錯了什么嗎？

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: rosybrown;
  background: #ffff;
}

.container {
  display: grid;
  max-width: 960px;
  padding: 10px;
  margin: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

.item {
  background: steelblue;
  color: white;
  font-size: 20px;
  padding: 20px;
  border: skyblue 1px solid;
}

.item:nth-child(1) {
  grid-column: 1/3;
  background-color: springgreen;
}

.item:nth-child(2) {
  background-color: royalblue;
  grid-row: 1/3;
}

.item:nth-child(3) {
  background: darkred;
}

.item:nth-child(5) {
  grid-column: 1/4;
}

<div class="container">
  <div class="item"> item1 </div>
  <div class="item"> item2 </div>
  <div class="item"> item3 </div>
  <div class="item"> item4 </div>
  <div class="item"> item5 </div>
</div>

將grid-row: 1添加到第一個項目，或將grid-column: 3添加到第二個項目。

.item:nth-child(1) {
   grid-column: 1/3;
   grid-row: 1; /* new */
 }

運籌學

.item:nth-child(2) {
   grid-row: 1/3;
   grid-column: 3; /* new */
 }

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;  
  max-width: 960px;
  padding: 10px;
  margin: 0;
}

.item {
  background: steelblue;
  color: white;
  font-size: 20px;
  padding: 20px;
  border: skyblue 1px solid;
}

.item:nth-child(1) {
  grid-column: 1/3;
  background-color: springgreen;
  grid-row: 1; /* new */
}

.item:nth-child(2) {
  background-color: royalblue;
  grid-row: 1/3;
  /* grid-column: 3; */ /* new */
}

.item:nth-child(3) {
  background: darkred;
}

.item:nth-child(5) {
  grid-column: 1/4;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: rosybrown;
  background: #ffff;
}

<div class="container">
  <div class="item"> item1 </div>
  <div class="item"> item2 </div>
  <div class="item"> item3 </div>
  <div class="item"> item4 </div>
  <div class="item"> item5 </div>
</div>

你可以利用網格模板區域& amp網格區域，像這樣:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: rosybrown;
  background: #ffff;
}

.container {
  display: grid;
  max-width: 960px;
  padding: 10px;
  margin: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
      "item1 item1 item2"
      "item3 item4 item2"
      "item5 item5 item5"
}

.item {
  background: steelblue;
  color: white;
  font-size: 20px;
  padding: 20px;
  border: skyblue 1px solid;
}

.item:nth-child(1) {
  grid-area: item1;
  background-color: springgreen;
}

.item:nth-child(2) {
  background-color: royalblue;
  grid-area: item2;
}

.item:nth-child(3) {
  background: darkred;
  grid-area: item3;
}

.item:nth-child(4) {
  grid-area: item4;
}

.item:nth-child(5) {
  grid-area: item5;
}

<div class="container">
  <div class="item"> item1 </div>
  <div class="item"> item2 </div>
  <div class="item"> item3 </div>
  <div class="item"> item4 </div>
  <div class="item"> item5 </div>
</div>