Grid

概念

Grid布局是一種二維布局方法，能夠在行和列中布置內容。因此在任何網格中都有兩個軸，橫軸（即行軸，內聯）和縱軸（即列軸，塊）。

什么是網格

網格是一組相交的水平線和垂直線，它定義了網格的列和行。我們可以將網格元素放置在與這些行和列相關的位置上

固定或彈性的軌道的大小

• 可以使用固定的軌道尺寸創建網格，比如使用像素單位。
• 也可以使用比如百分比或者fr(專門為此目的創建的新單位)來創建有彈性尺寸的網格

網格容器

通過在元素上聲明 display：grid 或 display：inline-grid 來創建一個網格容器。一旦我們這樣做，這個元素的所有直系子元素將成為網格元素。

網格軌道

通過 grid-template-columns 和 grid-template-rows 屬性來定義網格中的行和列。這些屬性定義了網格的軌道。一個網格軌道就是網格中任意兩條線之間的空間。

fr單位

軌道可以使用任何長度單位進行定義。
網格還引入了一個新的長度單位fr代表網格容器中可用空間的一等份。

在軌道清單中使用repeat()

有著多軌道的大型網格可使用 repeat() 標記來重復部分或整個軌道列表。

.wrapper {display: grid;grid-template-columns: 1fr 1fr 1fr; }

兩者等價

.wrapper {display: grid;grid-template-columns: repeat(3, 1fr); }

Repeat 語句可以用于重復軌道列表中的一部分。在下面的例子中我創建了一個網格：它起始軌道為20像素，接著重復了6個1fr的軌道，最后再添加了一個20像素的軌道。

.wrapper {display: grid;grid-template-columns: 20px repeat(6, 1fr) 20px; }

隱式網格

如果在網格定義之外又放了一些東西，或者因為內容的數量而需要的更多網格軌道的時候，網格將會在隱式網格中創建行和列.
按照默認，這些軌道將自動定義尺寸，所以會根據它里面的內容改變尺寸。
也可以在隱式網格中用 grid-auto-rows 和 grid-auto-columns 屬性來定義一個設置大小尺寸的軌道。

軌道大小 和 minmax()

在設置一個顯式的網格或者定義自動創建的行和列的大小的時候，我們也許想給網格一個最小的尺寸，確保他們能擴大到容納他里面添加的內容。
網格用minmax()函數來解決這個問題。

網格線

當我們定義網格時，我們定義的是網格軌道，而不是網格線。Grid 會為我們創建編號的網格線來讓我們來定位每一個網格元素.
網格線的編號順序取決于文章的書寫模式。在從左至右書寫的語言中，編號為 1 的網格線位于最左邊。在從右至左書寫的語言中，編號為 1 的網格線位于最右邊。

跨軌道放置網格元素

使用了grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 屬性

網格單元

一個網格單元是在一個網格元素中最小的單位， 從概念上來講其實它和表格的一個單元格很像。

網格區域

網格元素可以向行或著列的方向擴展一個或多個單元，并且會創建一個網格區域。網格區域的形狀應該是一個矩形 - 也就是說你不可能創建出一個類似于“L”形的網格區域。

網格間距

在兩個網格單元之間的 網格橫向間距 或 網格縱向間距 可使用 grid-column-gap 和 grid-row-gap 屬性來創建，或者直接使用兩個合并的縮寫形式 grid-gap。

嵌套網格

一個網格元素可以也成為一個網格容器。

CSS屬性

display

• grid ：生成一個塊級網格
• inline-grid ：生成一個內聯網格
• subgrid ：嵌套網格

grid-template-columns

• 該屬性是基于 網格列. 的維度，去定義網格線的名稱和網格軌道的尺寸大小。
• 這些值表示 網格軌道(Grid Track) 大小，它們之間的空格表示網格線。

grid-template-rows

• 該屬性是基于 網格行 的維度，去定義網格線的名稱和網格軌道的尺寸大小。

grid-template-areas

• 該屬性是 grid areas 在CSS中的特定命名.
• 通過引用 grid-area 屬性指定的 網格區域(Grid Area) 名稱來定義網格模板。重復網格區域的名稱導致內容跨越這些單元格。一個點號（.）代表一個空的網格單元。這個語法本身可視作網格的可視化結構。

grid-template

• 用于定義 grid-template-rows ，grid-template-columns ，grid-template-areas 縮寫(shorthand)屬性。

grid-row-gap

• 設置行元素之間的間隙(gutter)大小

grid-column-gap

• 設置元素列之間的間隔(gutter)大小

grid-gap

• grid-row-gap 和 grid-column-gap 的縮寫語

justify-items

• 沿著 行軸線(row axis) 對齊 網格項(grid items) 內的內容
• justify-items: start | end | center | stretch;

align-items

• 沿著 列軸線(column axis) 對齊 網格項(grid items) 內的內容
• align-items: start | end | center | stretch;

demo

demo傳送地址

轉載于:https://www.cnblogs.com/horizon-jens/p/9909750.html

總結

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

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