grid 布局的使用
css 網格布局，是一種二維布局系統。
瀏覽器支援情況:老舊瀏覽器不支援，
概念： 網格容器。元素應用dispalay:grid,它是所有網格項的父元素。
網格項。網格容器的子元素。
網格線。組成網格線的分界線，他們可以是列網格線，也可以是行網格線
網格軌道。兩個相鄰的網格線之間為網格軌道，可以認為是網格的行列或者行。
網格單元。兩個相鄰的列網格線和兩個相鄰的網格線組成的網格單元，它是最小的網格單元。
網格區。網格區是由任意數量網格單元組成。
設定在網格容器上的屬性
注：當元素設定了網格布局，column、float、clear、vertical-align屬性無效
1. display: grid | inline-grid | subgrid;
屬性值： grid: 生成塊級網路
inline-grid: 生成行內網格
subgrid: 如果容器本身是網格項，用來繼承父容器的行列大小。
2.grid-template-columns: ... | ... ;
grid-template-rows: ... |
設定行和列的大小。
屬性值： track-size: 軌道大小，可以使用css長度，百分比或用分數。
line-name:網格線名字，可以選擇任意名字。
當設定行或者列大小為auto 時，網格會自動分配空間和網格名稱。
.container
可以給網格線定義名字.
.container
用fr單位可以將容器分為幾等份，例如下面分成三等份
.container
3.grid-template-areas
通過獲取網格項中的grid-area屬性值（名稱），來定義網格模版。
重複網格區（grid-area）名稱將跨越網格單元格，『.』代表空網格單元。
屬性值： grid-area-name: 網格項的grid-area屬性值（名字）『.』 : 空網格單元 none: 不定義網格區域
.item-a.item-b
.item-c
.item-d
.container
4. grid-column-gap：; 和 grid-row-gap: ;
網格單元間距
屬性值：line-size: 網格線間距,設定單位值
.container
5. grid-gap：;
是grid-column-gap 和 grid-row-gap簡寫。
.container
6. justify-items: start | end | center | stretch（預設） ;
垂直於列網格線對齊，適用於網格容器裡的所有網格項。
屬性值：
start: 左對齊。
end: 右對齊。
center: 居中對齊。
stretch: 填滿（預設）。
.container
7. align-items: start | end | center | stretch ;
垂直於行網格線對齊，適用於網格容器裡的所有網格項。
屬性值：
start： 頂部對齊。
end： 底部對齊。
center： 居中對齊。
stretch：填滿（預設）。
8. justify-content: start | end | center | stretch | space-around |
space-between | space-evenly ;
如果用像px非彈性單位定義的話，總網格區域大小有可能小於網格容
器，這時候你可以設定網格的對齊方式（垂直於列網格線對齊）。
屬性值： start: 左對齊。 end: 右對齊。 center: 居中對齊。
stretch: 填滿網格容器。 space-around: 網格項兩邊間距相等，網格項之間間隔是單側的2倍。
space-between: 兩邊對齊，網格項之間間隔相等。 space-evenly: 網格項間隔相等。
.container
9. align-content: start | end | center | stretch | space-around |
space-between | space-evenly ;
如果用像px非彈性單位定義的話，總網格區域大小有可能小於網格
容器，這時候你可以設定網格的對齊方式（垂直於行網格線對齊）。
屬性值： start: 頂部對齊。 end: 底部對齊。 center: 居中對齊。
stretch: 填滿網格容器。 space-around: 網格項兩邊間距相等，網格項之間間隔是單側的2倍。
space-between: 兩邊對齊，網格項之間間隔相等。 space-evenly: 網格項間隔相等。
.container
10. grid-auto-columns: ... ; 和 grid-auto-rows: ... ;
自動生成隱式網格軌道（列和行），當你定位網格項超出網格容器
範圍時，將自動建立隱式網格軌道.
屬性值：track-size: 網格軌道大小,可以是固定值，百分比或者是
分數（fr單位）。
.container
11. grid-auto-flow : row（預設） | column | dense ;
在沒有設定網格項的位置時，這個屬性控制網格項怎樣排列
屬性值：
row: 按照行依次從左到右排列。
column: 按照列依次從上倒下排列。
dense: 按先後順序排列。
設定在網格項上的屬性
1. grid-column-start: | | span | span | auto ;
grid-column-end: | | span | span | auto ;
grid-row-start: | | span | span | auto ;
grid-row-end: | | span | span | auto ;
通過網格線來定義網格項的位置。grid-column-start、grid-row-start定義網格項的
開始位置，grid-column-end、grid-row-end定義網格項的結束位置。
屬性值： line: 指定帶編號或者名字的網格線。 span : 跨越軌道的數量。
span : 跨越軌道直到對應名字的網格線。 auto: 自動展示位置，預設跨度為1。
.item-a
2. grid-column: / | / span ;
grid-row: / | / span ;是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的簡寫。
.item-c
3. grid-area: | / / / ;
定義網格項名字，以便建立模組（容器屬性grid-template-areas來定義模組）。
屬性值： name: 專案名子。 / / / :
可以是數字或網格線名字。
例子： 定義網格項名字：
.item-d
通過網格線定位網格項：
.item-d
4. justify-self: justify-self: start | end | center | stretch;
定義單個網格項垂直於列網格線的對齊方式。
屬性值： start: 網格區域左對齊。 end: 網格區域右對齊。
center: 網格區域居中。 stretch: 網格區域填滿。
5. align-self: start | end | center | stretch;
定義單個網格項垂直於行網格線的對齊方式。
屬性值：
start: 網格區域頂部對齊。
end: 網格區域底部對齊。
center: 網格區域居中。
stretch: 網格區域填滿。
css之grid布局使用
場景 專案開發中遇到如下問題，從後端請求活動資料，陣列長度未知，每乙個活動以卡片格式展示，展示格式如下 剛看到需求，我選擇使用flex布局進行布局。建立如下demo css display flex justify content space between flex wrap wrap paddi...
grid網格布局使用
grid布局是指對網頁進行劃分成乙個乙個網格，然後根據自己的要求，可以任意組合。以前寫類似的功能，很麻煩，需要寫很多的css去控制，有了grid就很方便了，可以隨意進行組合。跟flex有很多地方相似，包括有部分屬性。不同的地方也很突出，尤其是flex是一維，只有橫向。而grid是有橫向和縱向。另外g...
布局篇 Grid布局
特點 1 可以定義任意數量的行和列 2 行的高度和列的寬度可以使用絕對值 相對比例或自動調整的方式，可設定最大值和最小值 3 內部元素可以設定自己所在的行 列，還可以設定跨越幾行 幾列 4 可以設定內部元素的對齊方向 grid類具有columndefinitions和rowdefinitions兩個...