拓展认识 · 布局
Grid：同时组织行与列
Grid 适合卡片墙、课程目录等二维布局。这里三个卡片的排列本身就是 Grid 示例。
- display: grid 设置在父容器上。
- repeat(3, minmax(0, 1fr)) 创建三个等分列轨道。
- gap 同时设置行、列间距。
- 一维菜单可优先考虑 Flexbox，二维卡片区域可考虑 Grid；两者可以嵌套使用。
.grid-demo {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}HTML 结构CSS 外观JavaScript 行为