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> ```