grid布局 針對的是子元素布局。
1：形成乙個網格結構(父元素新增)：
display:grid;
2: 劃分行和列
grid-template-columns:
grid-template-rows:
如果屬性後面是3個值 代表3行或3列 能接受具體的畫素 也能是百分比
劃分行和列的時候的關鍵字 和 方法:
a: repeat(重複的次數,重複的值)【常用】
eg：grid-template-columns:repeat(3,200px);
grid-template-rows:repeat(3,200px);
b: auto-fill關鍵字( 自動填充 )【不常用】
eg：grid-template-columns:repeat(auto-fill,100px);
c: fr關鍵字(列寬片段)【不常用 了解】
d: minmax(最小值,最大值)【不常用 了解】
3: grid-gap:20px 30px; 簡寫形式（行和列的間距）
4: 指定某個專案所在的區域:
grid-template-areas:
"a a a"
". . b"
". c c"；
注: grid-template-areas 必須和 grid-area共同使用
grid-area放在具體某個專案裡面的,指定專案名稱.
比如：div:nth-child(1)
div:nth-child(2)
5:指定順序:（元素的排列順序，是橫排還是豎排）
grid-auto-flow:row/column
6: 內容在專案裡面的對齊方式:
place-items:center center;
屬性值： start;對齊單元格的起始邊緣。
end;對齊單元格的結束邊緣。
center;單元格內部居中。
stretch;拉伸，佔滿單元格的整個寬度（預設值）。
注: 網格內部的內容需要固定的大小 百分比的時候 左右的對齊方式會產生bug
7: place-content:; 控制整個網格在父元素裡面的對齊方式.
8、指定專案的四個邊框，分別定位在哪根網格線（劃分佔據區域）（新增在子元素上面）
eg：（簡寫形式）
div:nth-child(1)
css 網格布局 CSS網格布局簡介
css 網格布局 css在不斷發展。目前正在談論的某些功能可能會在不久的將來成為主流，而其他功能可能會逐漸淡出人們的視線。無論哪種方式，了解將來考慮使用哪些css選擇器，布局模組和過濾器都將使您成為更強大的前端開發人員。網格布局是一種很快就會被廣泛接受的選擇。您可以想象，css的這一子集可以簡化內容...
Grid布局（網格布局）
網格布局 grid 是 css 中乙個布局方案。它將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局。以前，只能通過複雜的 css 框架達到的效果，現在瀏覽器內建了。下面這樣的布局，就是grid布局。grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但...
網格布局（grid布局）
他可以將頁面分為多個網格，可以任意組合不同的網格 做出各種各樣的布局。網格布局為二維性質的。grid row gap 1rem 行間距 grid column gap 1rem 列間距 grid gap 1rem 設定行列間距 grid template columns 列寬和列數 grid tem...