2-容器創建與行列劃分 · 前端教學筆記[更新中...]

# 2. 創建 Grid 容器與劃分行與列 [toc] ## 2.1 屬性 | 序號 | 屬性 | 描述 | | ---- | ---------------------------- | ------------------------------------------------------- | | 1 | `display` | 聲明使用網格布局的容器元素 | | 2 | `grid-auto-flow` | 聲明項目在網格中自動填充方案(行優先/列優先) | | 3 | `grid-template-columns/rows` | 在容器中顯式地劃分行與列,生成指定數量的單元格來放置項目 | | 3 | `grid-auto-rows/columns` | 根據項目數量,在容器中隱式生成行與列來放置它們 | --- ## 2.2 示例 ![](https://img.kancloud.cn/10/2c/102c995f196054ff935c600b14cbe597_1128x1126.jpg) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>創建Grid容器</title> <style> .container { width: 400px; height: 400px; background-color: wheat; display: grid; /* 設置項目在網格中的填充方案: 默認行優先*/ grid-auto-flow: row; /* grid-auto-flow: column; */ /* 在容器中顯式地劃分行與列,生成指定數量的單元格來放置項目 */ grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px; /* 項目必須放在柵格中, 二行三列,只能放置6個項目 */ /* 為放置其它項目,grid布局會自動生成新行, 即隱式行 */ /* 隱式行默認為占據容器剩余寬度, 也可以自定義,如設置為150px */ grid-auto-rows: auto; grid-auto-rows: 150px; } .item { background-color: lightblue; font-size: 2rem; } </style> </head> <body>  <div class="container"> <span class="item item1">1</span> <span class="item item2">2</span> <span class="item item3">3</span> <span class="item item3">4</span> <span class="item item3">5</span> <span class="item item3">6</span> <span class="item item3">7</span> </div> </body> </html> ```