CSS 網格如何在左對齊最後一行的同時使框架居中？

使用CSS 網格居中和左對齊框

許多用戶在居中對齊框同時將最後一行與最後一行對齊時遇到了挑戰左邊。預設情況下，ul 元素往往具有固定的寬度，無法適應其內容，因此很難自動實現居中和左對齊。

CSS 網格解

為了解決這個問題，可以使用CSS網格。透過實現以下CSS 屬性，您可以在左對齊最後一行的同時將框置中：

div {
  padding: 20px;
  width: 200px;
  border: 1px solid;
  overflow: hidden;
  resize: horizontal;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px); /* Width of elements */
  grid-auto-rows: 40px; /* Height of elements */
  grid-gap: 4px;
  justify-content: center; /* Centers boxes */
}

ul li {
  background-color: wheat;
}

HTML 程式碼

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

說明

grid-template-columns 和grid-auto-rows屬性定義了網格中的列和行。 grid-gap 屬性設定元素之間的間距。居中和左對齊的關鍵是 justify-content 屬性。當設定為“center”時，它將網格項放置在父容器內可用空間的水平中心。這可確保框居中，最後一行在網格末尾時向左對齊。

以上是CSS 網格如何在左對齊最後一行的同時使框架居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！