在您给的文档中，详细介绍了CSS Grid布局的基础知识和应用技巧。

关键概念

1. *网格容器 *: 用 display: grid; 属性创建，包含全部网格单元格。
2. *网格轨道 *: 网格中的水平和垂直线，定义了网格的列和行。
3. *网格线 *: 连接网格轨道的线，网格单元格位于网格线之间。
4. *网格单元格 *: 网格中由四条网格线围成的矩形区域。
5. *网格项 *: 放置在网格容器中的元素，Neng通过 grid-column 和 grid-row 属性定位。

CSS Grid布局示例

css .grid-container { display: grid; grid-template-columns: 200px 200px 200px; /* 定义3列， 每列200px宽阔 / grid-template-rows: 100px 100px; / 定义2行，每行100px高大 / grid-gap: 10px; / 定义单元格间距 */ }

.grid-item { grid-column-start: 2; /* 网格项从第2列开头 / grid-column-end: 4; / 网格项到第4列收尾，即跨越第2和第3列 / grid-row-start: 1; / 网格项从第1行开头 / grid-row-end: 3; / 网格项到第3行收尾，即跨越第1和第2行 */ }

自习惯网格布局

css .grid-container { display: grid; grid-template-columns: repeat); /* 自动习惯列数，每列至少许200px，不超出1fr */ grid-gap: 10px; }

网格轨道和网格线

• 网格轨道的数量和巨大细小由 grid-template-columns 和 grid-template-rows 属性定义。
• grid-gap 属性定义了网格线之间的间隔。

备选方案

对于不支持CSS Grid布局的老版浏览器，Neng用Flexbox或老一套布局作为备选方案。

css .grid-container { display: flex; flex-wrap: wrap; }

.grid-item { width: 33.33%; /* 个个网格项占据33.33%的宽阔度 */ height: 200px; margin: 10px; box-sizing: border-box; }

通过以上信息， 您Nenggeng优良地搞懂CSS Grid布局的干活原理，并Neng够创建麻烦的响应式页面布局。