6.間距

grid-column-gap和grid-row-gap屬性用來創建列與列，行與行之間的間距

間距(Gap)可以設置任何非負值，長度值可以是px、%、em等單位值

grid-gap是grid-row-gap和grid-column-gap兩個屬性的縮寫

如果它指定了兩個值，那么第一個值是設置grid-row-gap的值，第二個值設置grid-column-gap的值

如果只設置了一個值，表示行和列的間距相等，也就是說grid-row-gap和grid-column-gap的值都相同

7.通過網格線號碼來定位網格項目

網格線實際上是代表線的開始、結束，兩條線之間就是網格列或行

每條線是從網格軌道開始，網格的網格線從1開始，每條網格線逐步增加1

兩列三行的網格創建三條列網格線和四條行網格線。item1就是由行和列的號碼重新定位

如果一個網格項目跨度只有一行或一列，那么grid-row-end和grid-column-end不是必需的

grid-row是grid-row-start和grid-row-end的簡寫。grid-column是grid-column-start和grid-column-end的簡寫

如果只提供一個值，他指定了grid-row-start和grid-column-start的值

如果提供兩個值，第一個值是grid-row-start、grid-column-start的值，第二個值是grid-row-end、grid-column-end的值，兩者之間必須要用/隔開

如果指定四個值，第一個值對應grid-row-start，第二個值對應grid-column-start，第三個值對應grid-row-end和第四個值對應grid-column-end

8.網格項目跨行或跨列

默認情況下網格項目跨度只有一個列和行，但可以跨越多個行和列

可以通過設置grid-column-end和grid-column-start距離多個網絡線號實現多個列跨越

同樣的可以通過grid-row-end和grid-row-start距離多個網格號實現多個行跨越

通過簡寫的grid-row和grid-column也能實現多行或多列的跨越

關鍵詞span后面緊隨數字，表示合并多少個列或行

總結

以上是生活随笔為你收集整理的CSS Grid布局(2)的全部內容，希望文章能夠幫你解決所遇到的問題。

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