# Grid 布局[細說版] [toc] ## 準備工作 - **編輯器**: VSCODE - **瀏覽器**: FireFox - **瀏覽器同步插件**: Live Server ## 1. 基本術語 - **容器**: 使用網格布局的元素 - **項目**: 容器中的子元素 - **網格線**: 將容器劃分為行與列的直線 - **顯式網絡**: 由用戶根據項目數量指示容器生成的網格 - **隱式網格**: 由容器根據項目數量自動生成的網格 - **單元格**: 項目放置的具體空間 - **網格區域**: 一個以上的單元格組成的矩形區域 > **網格布局的基本步驟:** 1. 生成網格; 2. 放置項目 --- ## 2. 創建 Grid 容器 - `display`: 聲明使用網格布局的容器元素 - `grid-auto-flow`: 聲明項目在網格中自動填充方案(行優先/列優先) - `grid-template-columns/rows`: 在容器中顯式地劃分行與列,生成指定數量的單元格來放置項目 - `grid-auto-rows/columns`: 根據項目數量,在容器中隱式生成行與列來放置它們 - `demo1.html` --- ## 3. 設置單元格數量與尺寸 - 固定寬度`px`: 固定大小 - 百分比`%`: 以容器大小為依據來計算 - 自動計算`auto`: 由瀏覽器決定長度 - 比例`fr`: 將容器空間按比例分配給每一個單元格 - 區間`minmax(min,max)`: 設置單元格尺寸變化范圍 - 重復生成`repeat()`: 快速生成相同大小單元格的 - 自動填充`auto-fill`: 單元格固定,但容器不確定時,可以讓一行/列容納盡可能多的項目 - `demo2.html` --- ## 4. 將項目填充到指定單元格中 ### 4.1 使用默認網格線劃分單元格 - 默認從左上角開始,從左到右,從上到下,依次從 1 開始編號 - 如果從右下角開始,由下向上,由右向左,依次由從-1 開始編號 - 根據數字網格線,可以將項目放到網格線形成的封閉矩形區域中 - `demo3.html` ### 4.2 使用命名網格線劃分單元格 - 使用語義化的名稱替代容器自動生成的數字網線線編號 - 同一條網絡線可以有多個別名 - `demo4.html` ### 4.3 重復設置單元格時, 命名網格線會自動添加索引 - `repeat(3, [col-start] 100px [col-end])`: 只需設置命名前綴,編號會自動生成 - `grid-column-end: col-end 3;`: 前綴加索引就可以引用到自動生成的命名網格線 - `demo5.html` --- ## 5. 將項目填充到網格區域中 ### 5.1 默認網格區域 - 設置項目屬性`grid-area`: 將項目填充到指定容器的區域中 - 語法: `grid-area: 起始行 / 起始列 / 結束行 / 結束列` - `demo6.html` ### 5.2 命名網格區域 - 可以為每一個網格區域設置一個語義化的名稱 - 具有名稱的網絡區域稱之為**命名區域** - 名稱相同的網格區域會合并, 形成更大的區域空間 - 項目設置的區域名稱后,會自動填充到容器中應對的命名區域中 - `demo7.html` ### 5.3 網格區域占位符 - 當項目默認已到填充到正確的區域中,無需設置時,可使用"."做為占位符 - `demo8.html` ### 5.4 命名網格區域線默認名稱 - 區域起始行/列: `區域名稱-start`, 如`header-start / header-start`,表示區域起始行/區域起始列 - 區域結束行/列: `區域名稱-end`,如`header-end / header-end`,表示區域結束行/區域結束列 - `demo9.html` --- ## 6. 設置所有項目在容器中的對齊方式 - `justify-content`: 設置所有項目在容器中水平方向的對齊方式 - `align-content`: 設置所有項目在容器中垂直方向的對齊方式 - `place-content`: 上面二個屬性的簡寫, `place-content: 垂直對齊方式 水平對齊方式` - `demo10.html` --- ## 7. 設置所有項目在單元格或網格區域內的對齊方式 - `justify-items`: 設置所有項目在單元格/網格區域中水平方向的對齊方式 - `align-items`: 設置所有項目在單元格/網格區域中垂直方向的對齊方式 - `place-items`: 上面二個屬性的簡寫, `place-items: 垂直對齊方式 水平對齊方式` - `demo11.html`: 所有項目在單元格中的對齊方式 - `demo12.html`: 所有項目在網格區域中的對齊方式 --- ## 8. 設置某個項目在單元格或網格區域內的對齊方式 - `justify-self`: 設置某個項目在單元格/網格區域中水平方向的對齊方式 - `align-self`: 設置某個項目在單元格/網格區域中垂直方向的對齊方式 - `place-self`: 上面二個屬性的簡寫, `place-self: 垂直對齊方式 水平對齊方式` - `demo13.html` --- ## 9. 設置容器中行與列之間的間距/間隙 - `column-gap`: 列間距 - `row-gap`: 行間距 - `gap: 行間距 列間距`: 簡寫 - `gap: 值`: 行與列相等,可只寫一個值 - `demo14.html`