問題

我正在嘗試使用CSS網格(第一次),我正在努力解決一些基本問題.

我正在構建一個包含三個元件的頁尾.

   #footer-content {
    position: relative;
    margin: 0 auto;
    padding: 0 20px;
    max-width: $max-width;
    width: 100%;
    height: 100%;
    color: white;

    display: grid;
    grid-template-columns: 12% 12% 76%;
}
 

移動:

 @media only screen and (max-width: 800px) {
  #footer-content {
      grid-template-columns: 50% 50% 100%;
    }
}
 

上面程式碼的問題:第三個元素(寬度100%)不被推送到下一行,而是出現在螢幕上.

使用grid-template-columns: repeat(auto-fit, 50% 50% 100%);不起作用.

使用grid-template-columns: repeat(auto-fit, 50%);工作:第三個元素被推下,但只有50%的寬度而不是100%.

問題:如何使用CSS網格自動裝配不同大小的三列?

  最佳答案

Grid-columns不包裝,所以這個grid-template-columns: 50% 50% 100%;對於兩列沒有意義.您將定義TWO列並告訴第三個元素在以下行中跨越它們.

 .box {
  height: 150px;
  background: lightblue;
  border: 1px solid grey;
}

#footer-content {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: .25em;
}

.box:nth-child(3) {
  grid-column: span 2;
} 
 <div id="footer-content">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div> 

  相同標籤的其他問題

htmlcsscss-grid