如何使用自動填入或自動調整在沒有媒體查詢的情況下實現 CSS 網格環繞？

使用CSS 網格自動填充或自動調整進行無媒體查詢換行

在CSS 網格中，無需媒體查詢即可實現自動換行透過在grid-template-columns 中的Repeat() 表示法中使用auto-fill 或auto-fit關鍵字，或grid-template-rows.

自動填入

auto-fill 關鍵字定義填充容器可用空間的網格單元數。它將自動調整列數以適應容器大小而不會溢出。

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

在此範例中，grid-template-columns 屬性指定網格應自動填入其寬度，寬度為186px

自動調整

自動調整

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(186px, auto));
}

自動調整

auto-fit 關鍵字的行為類似自動填充，但它會調整列的大小以適應可用空間而不是列數。 在此範例中，grid-template-columns 屬性指定網格應自動將盡可能多的列放入可用空間中，每列的最小寬度為186 像素，自動設定最大寬度。 這些技術可讓您建立一個 CSS 網格來包裝其內容無需媒體查詢，動態調整可用空間。

以上是如何使用自動填入或自動調整在沒有媒體查詢的情況下實現 CSS 網格環繞？的詳細內容。更多資訊請關注PHP中文網其他相關文章！