Grid布局通过display: grid创建容器，使用grid-template-columns/rows定义行列，gap设置间距，可借助网格线或grid-area进行元素定位，repeat()和minmax()实现响应式自动填充，grid-template-areas提升布局可读性，并通过align-items、justify-items等控制对齐，适合复杂二维页面结构。
Grid网格布局是CSS中最强大的布局系统之一，它能轻松实现二维布局（行和列），非常适合构建复杂的网页结构。相比Flexbox的一维布局，Grid更适合整体页面的划分。
1. 创建一个基本Grid容器
要启用Grid布局，先在父元素上设置display: grid或display: inline-grid。
示例：
.container {display: grid;}此时子元素会自动成为网格项，并按默认方式排列（单列多行）。
立即学习“前端免费学习笔记（深入）
”；
2. 定义行与列
使用grid-template-columns和grid-template-rows来定义列宽和行高。
常用单位：
px：固定尺寸fr：弹性比例单位（如1fr 2fr表示两列，比例为1:2）
%：百分比auto：自适应内容大小
例子：
.container {display: grid;grid-template-columns: 1fr 2fr;grid-template-rows: 100px 50px;}这会创建两列（第一列占1份，第二列占2份）、两行（高度分别为100px和50px）。
3. 设置间距
用gap属性设置网格项之间的间距（替代旧的grid-gap）。
.container {gap: 10px;/* 可分别设置 */row-gap: 10px;column-gap: 20px;}推荐使用gap统一控制，简洁清晰。
4. 网格线与元素定位
Grid通过“网格线”编号来定位元素。可以手动指定某个项目从哪条线开始到哪条线结束。
关键属性：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载grid-column-start/ grid-column-end grid-row-start/ grid-row-end
简写：
grid-column: 1 / 3;表示从第1条线跨到第3条线（占两列）
例子：
.item {grid-column: 1 / 3;grid-row: 1 / 2;}该元素将横跨前两列，占据第一行。
5. 使用repeat()函数简化代码
当有多组重复的行列时，可用repeat()函数。
.container {grid-template-columns: repeat(3, 1fr);}等价于1fr 1fr 1fr，创建三等分列。
还可结合其他值：
repeat(2, 100px 1fr)生成“100px+1fr”重复两次。
6. 自动填充与最小最大值（minmax）
使用repeat(auto-fill, ...)或auto-fit让网格自动适应容器宽度。
.container {grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));}含义：尽可能多地放入最小100px、最大1fr的列，自动换行。适合响应式卡片布局。
7. 网格模板区域（grid-template-areas）
通过命名区域直观设计布局，提升可读性。
.container {display: grid;grid-template-columns: 1fr 2fr;grid-template-rows: 100px 1fr 50px;grid-template-areas:"header header""sidebar main""footer footer";}.header { grid-area: header; }.sidebar { grid-area: sidebar; }.main { grid-area: main; }.footer { grid-area: footer; }这种方式让布局结构一目了然，适合复杂页面如后台管理界面。
8. 对齐方式
Grid提供多种对齐控制：
justify-items：横向对齐网格项（start | end | center | stretch）
align-items：纵向对齐justify-content：当总网格小于容器时，整体水平对齐align-content：垂直方向的整体对齐place-items：同时设置align-items和justify-items基本上就这些核心用法。掌握Grid后，你会发现传统浮动、定位的复杂布局变得异常简单。建议多动手练习，比如尝试重构一个传统布局为Grid实现，理解更深刻。