如何在沒有媒體查詢的情況下實現 CSS 網格環繞？

無需媒體查詢即可實現CSS 網格換行

在CSS 網格領域，無需借助媒體查詢即可實現理想的換行效果一個共同的挑戰。讓我們深入研究一個使用具有自動填充功能的重複（）表示法來實現這一難以捉摸的目標的解決方案。

使用重複（自動填充）改進方法

我們可以使用帶有自動填充的重複（）表示法作為重複次數，而不是透過grid-template- columns 明確指定網格項的寬度。自動填入動態計算網格容器內可以容納的最大列數而不溢出。

澄清自動填充

repeat 的自動填充變體() 根據以下原則確定重複次數：如果網格容器在相關軸上具有預定義或最大大小，則列數將匹配不會導致網格超出其容器的最大正整數。

範例實作

為了示範自動填入的強大功能，讓我們增強初始程式碼片段：

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

.grid > * {
  background-color: green;
  height: 200px;
}

透過此調整，我們的程式碼片段：

透過此調整，我們的程式碼片段：

透過此調整，我們的程式碼片段網格項目將動態調整其寬度以適應可用空間，並根據需要無縫換行。

項目寬度靈活性注意事項此外，自動填充允許讓孩子們指定自己的寬度，從而無需硬編碼寬度。這種方法增強了網格佈局的靈活性和反應能力。

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