首頁 > web前端 > css教學 > 如何在不使用媒體查詢的情況下設定 CSS 網格中的最大列數?

如何在不使用媒體查詢的情況下設定 CSS 網格中的最大列數?

Susan Sarandon
發布: 2024-11-26 09:28:10
原創
861 人瀏覽過

How Can I Set a Maximum Number of Columns in a CSS Grid without Using Media Queries?

沒有媒體查詢的CSS 網格中的最大列數

定義網格最大列數

定義具有設定最大值的網格是否可行列數,同時在視口大小改變時允許元素分解到新行?預設情況下,網格允許列無限擴展,這可能會導致在較窄的螢幕上出現不良佈局。

實作具有最大列數的網格

為了解決這個問題,CSS 網格引入了使用的概念grid-template-columns 屬性中的 max() 。 max() 函數接受兩個參數:第一個參數表示單一列的最大寬度,第二個參數確保每列在其父容器內保持回應。

實作

考慮以下內容程式碼片段:

.grid-container {
  --n: 4; /* Maximum number of columns */
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(200px, 100%/var(--n)), 1fr)
  );
}
登入後複製

這裡,--n 定義最大列數。 minmax() 確保每列的最小寬度為 200px,但不會超過 100%/var(--n)。此公式保證隨著容器寬度的增加,列寬永遠不會超過 100%/maximum_number_of_columns,從而防止建立額外的欄位。

此技術可讓您建立具有適應各種螢幕的響應式設計的網格大小,同時保持指定的最大列數。

以上是如何在不使用媒體查詢的情況下設定 CSS 網格中的最大列數?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板