一、理解 grid
?
二、理解 css?grid 布局
CSS Grid布局是一個二維的布局系統，它允許我們通過定義網格和網格中每個元素的位置和尺寸來進行頁面布局。CSS Grid是一個非常強大的布局系統，它不僅可以用于構建網格布局，還可以用于定位元素，并且可以很好地處理復雜的布局。
CSS Grid布局由兩個主要的組成部分組成：容器和項目。容器是我們要定義網格的元素，它的display屬性必須設置為grid或inline-grid。而項目是容器內的元素，它們被放置在網格中，并占據一個或多個網格單元。
要創建一個網格布局，我們需要先定義一個網格容器，然后使用grid-template-columns和grid-template-rows屬性定義行和列的大小和數量。我們還可以使用grid-column和grid-row屬性來控制每個項目在網格中的位置。
除了基本的網格布局，CSS Grid還提供了許多其他的布局特性，如重疊元素、自適應大小、對齊和間距等。這使得我們能夠使用CSS Grid來創建各種各樣的布局，從簡單的網格到復雜的響應式布局，以滿足不同的設計需求。
CSS Grid布局是一個靈活、強大和易于使用的布局系統，它提供了許多功能來幫助我們創建各種各樣的布局。它已經受到了廣泛的支持，并且越來越受到前端開發人員的重視。
三、grid布局有哪些核心概念
| 序號 | 概念 | 概念描述 |
| 1 | 網格容器(Grid Container) | 包含整個CSS Grid布局的父元素，通過設置該元素的display屬性為grid或inline-grid，即可將其定義為網格容器。 |
| 2 | 網格線(Grid Line) | 網格容器中劃分行列的分割線，可以通過數字或名稱進行標識。 |
| 3 | 網格軌道(Grid Track) | 兩個相鄰網格線之間的空間稱為網格軌道（可以是行軌道或列軌道），可以通過設置grid-template-columns和grid-template-rows屬性來定義。 |
| 4 | 網格單元(Grid Cell) | 兩個相鄰行列網格線交叉形成的方塊區域，用于定義網格中的項目。 由四個相鄰的網格線所圍成的矩形區域，是網格中的基本單位。 |
| 5 | 網格項(Grid Item) | 網格容器中的任何元素都可以成為網格項，規定了網格項在網格單元中的位置和大小。 位于網格單元中的內容，可以是任何HTML元素。 |
| 6 | 網格區域(Grid Area) | 由多個網格單元組成的矩形區域，用于定義項目的位置和跨度。 可以通過grid-template-areas屬性進行定義。 |
| 7 | 網格模板(Grid Template) | 通過設置grid-template-columns和grid-template-rows屬性來定義網格軌道的大小和數量。 描述網格行數、列數和每個單元格的大小，可以通過grid-template-rows、grid-template-columns和grid-template-areas屬性進行定義。 |
| 8 | 網格屬性（grid property） | 用于控制網格項在網格容器中的位置和大小，包括grid-row、grid-column、grid-row-start、grid-column-start、grid-row-end、grid-column-end等屬性。 |
| 9 | 對齊(Alignment) | 設置網格項在網格單元中水平和垂直方向的對齊方式，可以分別使用justify-items和align-items屬性，也可以使用justify-self和align-self屬性分別定義每個網格項的對齊方式。 |
| 10 | 重疊(Overlap) | CSS Grid布局允許網格項在網格單元中互相重疊，這可以通過設置grid-template-areas屬性來實現。 |
| 理解這些核心概念可以更好地理解和使用CSS Grid布局。 | ||
四、瀏覽器兼容性
不考慮老舊的瀏覽器已經是可以使用了。
舊版瀏覽器可能需要添加一些前綴才能支持CSS Grid布局，而新版瀏覽器已經不需要前綴了。在編寫CSS Grid布局時，建議用適當的前綴完成兼容性工作，現在css工具也可以自動添加。
如果您的站點需要支持較老版本的瀏覽器，可以使用其他CSS布局方式來彌補CSS Grid布局的缺陷。例如，可以使用Flexbox布局或傳統的基于表格的布局來實現相應的設計效果。
五、當設置了 grid 布局后，哪些屬性將失效
| 當設置了 grid 布局后，以下屬性將失效 | ||
| 序號 | 屬性 | 備注 |
| 1 | float | |
| 2 | clear | |
| 3 | display: table-cell | |
| 4 | vertical-align | |
| 5 | width | 通過 grid-template-columns 和 grid-template-rows 定義列和行寬度 |
| 6 | height | 通過 grid-template-columns 和 grid-template-rows 定義列和行高度 |
| 7 | margin | 相關屬性（margin-top、margin-right、margin-bottom、margin-left、margin、margin-inline、margin-block） |
| 8 | padding | 相關屬性（padding-top、padding-right、padding-bottom、padding-left、padding、padding-inline、padding-block） |
| 9 | display: inline-grid | inline-grid 只能定義單行/單列 |
| 以上屬性失效是因為 grid 布局已經提供了更加靈活和高效的布局方式 | ||
六、grid 常用屬性
| 序號 | 屬性 | 屬性描述 |
| 1 | display | 用于定義網格容器的類型，可以設置為grid或inline-grid |
| 2 | grid-template-columns grid-template-rows | 用于定義網格的列數和行數，可以使用長度、百分比、auto、minmax()等值進行設置。 |
| 3 | grid-template-areas | 用于定義網格區域，在一個字符串中使用空格分隔每個單元格，可以使用句點（.）表示一個空單元格，使用名稱為none的單元格將不被占用 |
| 4 | grid-template | 用于同時定義網格的列數、行數和區域。 |
| 5 | grid-column-gap grid-row-gap | 用于定義網格行和列之間的間隙 |
| 6 | grid-auto-columns grid-auto-rows | 用于定義自動網格的列數和行數，當網格中的單元格無法滿足網格模板時，會使用自動網格填充剩余空間。 |
| 7 | grid-auto-flow | 用于定義自動網格的方向，可以設置為row、column或dense。 |
| 8 | grid-column-start grid-column-end grid-row-start grid-row-end | 用于定義單元格的位置，通過網格線的位置進行設置。 |
| 9 | grid-column grid-row | 用于同時定義單元格的開始和結束位置。 |
| 10 | grid-area | 用于為單元格定義一個名稱，以便在grid-template-areas屬性中進行引用 |
| 了解和掌握這些屬性可以幫助我們更好地使用CSS Grid布局來實現網頁布局。 | ||
七、DEMO
布局：大屏方案（grid）_大屏布局方案_snow@li的博客-CSDN博客
八、歡迎交流指正
參考鏈接
css3-flex布局：基礎使用 / Flexbox布局_snow@li的博客-CSDN博客
grid布局詳解 - Des李白 - 博客園
項目分享)
)
