我的第一個CSS網格區號似乎不起作用，它會選擇它想要作業的地方嗎？-有解無憂

所以我有一個名為標題、側邊欄、內容和側邊欄的網格區域，內容彼此相鄰，并在下面定義，側邊欄有效，但內容沒有。我怎樣才能使內容看起來像側邊欄。下面的圖片鏈接，以便我的問題更清楚

.gridcont {
  display: grid;
  background-color: rgb(172, 115, 68);
  border: 20px white;
  margin: 15px;
  font-size: 20px;
  padding: 20px;
  grid-template-columns: 200px 250px;
  grid-gap: 20px;
  grid-column-gap: 25px;
  grid-template-areas: "header header" "sidebar content" "sidebar content"
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: sidebar;
}

.item3 {}

<body>
  <div class="gridcont">
    <div class=" item1 item"> grid Item 1 </div>
    <div class=" item2 item">grid Item 2 </div>
    <div class=" item3 item">grid Item 3</div>
    <div class=" item4 item">grid Item 4</div>
    <div class=" item5 item">grid Item 5</div>

  </div>
</body>

請注意，我將第 3 項留空，因為如果我將內容分配給它，它會破壞整個事情。這就是我運行時的樣子 https://i.stack.imgur.com/mW93D.png 我希望我的結果看起來像：- 我的第一個 CSS 網格區號似乎不起作用，它會選擇它想要作業的地方嗎？

uj5u.com熱心網友回復：

你快到了。我添加了一個width: 479px margin: 15px auto使其居中并洗掉了列間隙，grid-gap: 30px;因為行和列間隙在提供的影像上非常相似。更新grid-template-area: "header header" "sidebar content1" "content2 content2" "footer footer"

至于專案...... .item3 和 .item4 只需要它們自己的名稱，因為它們是網格中的兩個不同專案 .item5 我命名為頁腳。我還為它們添加了黃色以匹配影像。我還為每個網格項添加了一些高度。

.gridcont {
  display: grid;
  width: 479px;
  background-color: rgb(172, 115, 68);
  border: 20px white;
  margin: 15px auto;
  font-size: 20px;
  padding: 20px;
  grid-template-columns: 200px 250px;
  grid-gap: 30px;
  grid-template-areas: 
  "header header" 
  "sidebar content1" 
  "content2 content2"
  "footer footer";
}

.item1 {
  grid-area: header;
  background-color: #ffcc00;
}

.item2 {
  grid-area: sidebar;
  background-color: #ffcc00;
}

.item3 {
  grid-area: content1;
  background-color: #ffcc00;
}

.item4 {
  grid-area: content2;
  background-color: #ffcc00;
}

.item5 {
  grid-area: footer;
  background-color: #ffcc00;
}

.item1, .item5 {
  height: 50px;
}

.item2, .item3, .item4 {
  height: 200px;
}

<body>
  <div class="gridcont">
    <div class=" item1 item"> grid Item 1 </div>
    <div class=" item2 item">grid Item 2 </div>
    <div class=" item3 item">grid Item 3</div>
    <div class=" item4 item">grid Item 4</div>
    <div class=" item5 item">grid Item 5</div>
  </div>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/421153.html

標籤：

上一篇：按下空格時禁用自動向下滾動

下一篇：模式內的垂直選項卡在不同的瀏覽器中未正確顯示