css grid布局是一個強大的CSS布局系統，允許將頁面分割成行和列，從而構建複雜的二維佈局。與Flexbox的一維佈局（單行或單列）不同，Grid提供更靈活的方式來同時處理行和列。
基本概念
1.Grid容器（Container）：Grid 布局的父元素，定義了網格的行與列。
2.Grid項目（Items）：放置在Grid容器內的子元素，這些項目將按照指定的行列規則排列。
要啟用 Grid 布局，必須將父容器的display屬性設置為grid。
定義行和列
使用grid-template-columns和grid-template-rows來定義網格的列和行。

1. grid-template-columns
   定義列的寬度。可以使用具體的像素、百分比、fr（fraction，代表可用空間的比例）等單位。
   2.grid-template-rows
   定義行的高度。
   設置網格間距
   使用 grid-gap 或分別使用 grid-row-gap 和 grid-column-gap 設置行與列之間的間距。
   放置Grid項目
   Grid項目會自動按照行和列的順序排列，但你可以指定它們跨越的行數和列數。
   1.grid-column
   定義項目跨越的列數或開始/結束的位置。可以用grid-column-start和grid-column-end來指定。
   2.grid-row
   定義項目跨越的行數或開始/結束的位置。可以用grid-row-start和grid-row-end來指定。
   自動排列與對齊
   1.justify-items和align-items
   • justify-items 定義項目在網格橫軸上的對齊方式（即列內的對齊）。
   • align-items 定義項目在網格縱軸上的對齊方式（即行內的對齊）。
   可選值包括：
   • start:靠起始邊對齊
   • end:靠結束邊對齊
   • center:居中對齊
   • stretch;項目拉伸以填滿網格單元
   2.justify-content和align-content
   這些屬性用來對整個網格進行對齊，類似於justify-items和align-items，但作用範圍是整個網格。
   css grid 布局