grid 的用法

加三個寬度為 200px 的列。

.container {display: grid;grid-template-columns: 200px 200px 200px;
}

• 用 fr 這個單位來靈活地定義網格的行與列的大小。grid-template-columns: 2fr 1fr 1fr; > grid-template-columns: 300px 2fr 1fr，那么第一列寬度是 300px，剩下的兩列會根據除去 300px 后的可用空間按比例分配。
• grid-column-gap 屬性來定義列間隙；使用 grid-row-gap 來定義行間隙；使用 grid-gap 可以同時設定兩者。grid-gap: 20px;
• 可以使用 repeat 來重復構建具有某些寬度配置的某些列。grid-template-columns: repeat(3, 1fr);
• 和之前一樣，你仍然得到了 3 個 1fr 的列。第一個傳入 repeat 函數的值（3）表明了后續列寬的配置要重復多少次，而第二個值（1fr）表示需要重復的構建配置，這個配置可以具有多個長度設定。
• 例如 repeat(2, 2fr 1fr)，這相當于填入了 2fr 1fr 2fr 1fr。
• grid-template-columns: 2fr repeat(5, 1fr);除了第一列以外全為 1fr，第一列為 2fr
• grid-template-columns: 500px repeat(5, 1fr);除了第一列以外五等分，第一列為 500px
• 溢出處理

grid-template-columns: 500px repeat(5, 200px);
overflow: auto;

grid 高級用法

• 同行同列高度一樣，這是局限。
• grid-auto-rows: 100px;設置固定行高，內容過多會溢出，但是這樣不好
• grid-auto-rows: minmax(100px, auto);行高最小值 100px，內容過多會自適應
• grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));auto-fill：寬度足夠寬的話，盡可能顯示多的列。能重復多少次就重復多少次。（代替原來 repeat 的那個數字）

.grid-four {width: 800px;margin: 50px auto;display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: minmax(100px, auto);grid-auto-rows: minmax(50px, auto);grid-gap: 20px;
}

• 顯式網格是我們用 grid-template-columns 或 grid-template-rows 屬性創建的，而隱式網格則是當有內容被放到網格外時才會生成的。
• template 管顯式，auto 管隱式
• grid-template-area： 'header header header’隨意設置網格里塊內容的位置。

---

總結

以上是生活随笔為你收集整理的CSS grid 的用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。