首先，你必須使用 display: grid 將容器元素定義為乙個 grid(網格) 布局，使用 grid-template-columns 和 grid-template-rows 設定 列 和 行 的尺寸大小，然後通過 grid-column 和 grid-row 將其子元素放入這個 grid(網格) 中。
網格容器(grid container)
網格項(grid item)
網格線(grid line)
網格軌道(grid track)
網格單元格(grid cell)
網格區域(grid area)
網格容器(grid container)
應用 display: grid 的元素。這是所有 網格項（grid item）的直接父級元素。在這個例子中，container 就是 網格容器(grid container)。
網格項(grid item)
網格容器（grid container）的子元素（例如直接子元素）。這裡 item 元素就是網格項(grid item)，但是 sub-item 不是。
網格線(grid line)
構成網格結構的分界線。它們既可以是垂直的（「列網格線(column grid lines)」），也可以是水平的（「行網格線(row grid lines)」），並位於行或列的任一側。例如，這裡的黃線就是一條列網格線
網格軌道(grid track)
兩條相鄰網格線之間的空間。你可以把它們想象成網格的列或行。下圖是第二條和第三條 行網格線 之間的 網格軌道(grid track)。
網格單元格(grid cell)
兩個相鄰的行和兩個相鄰的列網格線之間的空間。這是 grid(網格) 系統的乙個「單元」。下圖是第 1 至第 2 條 行網格線 和第 2 至第 3 條 列網格線 交匯構成的 網格單元格(grid cell)。
網格區域(grid area)
4條網格線包圍的總空間。乙個 網格區域(grid area) 可以由任意數量的 網格單元格(grid cell) 組成。下圖是 行網格線1和3，以及列網格線1和3 之間的網格區域。
display: display: grid | inline-grid;將元素定義為網格容器，並為其內容建立新的 網格格式上下文。
grid-template-columns:使用空格分隔的值列表，用來定義網格的列的尺寸大小，這些值表示的是網格軌道的大小，他們之間的空格表示網格線
.container網格之間的間距 （gap） 後乙個的屬性為前兩個的縮寫
grid-row-gap/gird-columns-gap
gid-gap：
與行軸、列軸對齊的屬性
align-items/justify-items
place-items： 第乙個值設定 align-items 屬性，第二個值設定 justify-items 屬性。如果省略第二個值，則將第乙個值同時分配給這兩個屬性。
更詳細的屬性下方鏈結
grid-column：
定義列佔據網格線的起，終點位置。
上面**可以縮寫成：
grid-columns: 1 / 4 /* 指的是網格項從網格線起點和終點 */
// 其他不同的寫法
grid-columns 1 / span 4 /*指的是網格項從網格線1的位置橫跨4個*/
2.grid-area:
為網格項提供乙個名稱，以便可以 被使用網格容器 grid-template-areas 屬性建立的模板進行引用。 另外，這個屬性可以用作grid-row-start + grid-column-start + grid-row-end + grid-column-end 的簡寫。
.item.item-d.item以下兩個**塊是等效的
css**
.container.container其他高階用法，下發鏈結
第一種方式
html**:23
4567
777
css**：
width: 90%;
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(4,50px);
grid-gap: 10px;
}border:1px solid red;
}
.item1
.item4
.item6
第二種方式：
html**：34
11972
56810
css**：
.box-a
.box-b
.box-c
.box-d
.box-e
.box-f
.box-g
.box-h
.box-i
.box-j
.box-k
width: 90%;
margin: 30px auto;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(4, 50px);
grid-gap: 10px;
grid-template-areas:
"header header header header"
"section1 section2 section3 section4"
"section5 section6 section3 section7"
"section8 section9 section3 section10";
}border:1px solid red;
}
Grid網格布局入門筆記
指定乙個容器採用網格布局，在父元素中定義grid屬性 display grid 塊級元素布局 或display inline grid 行內元素 在容器中新增了網格布局後，就要劃分行和列，columns 列 row 行 grid template columns 定義每一列的寬度 grid temp...
Grid布局（網格布局）
網格布局 grid 是 css 中乙個布局方案。它將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局。以前，只能通過複雜的 css 框架達到的效果，現在瀏覽器內建了。下面這樣的布局，就是grid布局。grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但...
網格布局（grid布局）
他可以將頁面分為多個網格，可以任意組合不同的網格 做出各種各樣的布局。網格布局為二維性質的。grid row gap 1rem 行間距 grid column gap 1rem 列間距 grid gap 1rem 設定行列間距 grid template columns 列寬和列數 grid tem...