视频字幕
CSS Grid布局是现代网页设计中最强大的布局工具之一。它提供了一个二维的网格系统，让我们可以同时控制行和列的布局。通过定义网格容器，我们可以将页面划分为规整的网格单元，然后将内容项目放置在这些单元格中，实现复杂而灵活的页面布局。
创建Grid布局的第一步是设置容器属性。我们使用display grid来声明一个网格容器。然后用grid-template-columns定义列的数量和大小，用grid-template-rows定义行的数量和大小。这里我们创建了一个三列两行的网格，每列使用1fr单位表示等分剩余空间。
Grid项目可以通过网格线编号进行精确定位。每个网格线都有编号，从1开始计算。我们可以使用grid-column-start和grid-column-end指定项目占据的列范围，使用grid-row-start和grid-row-end指定行范围。这样项目就可以跨越多个网格单元格，实现复杂的布局效果。
Grid布局的间距和对齐功能让我们能够精确控制网格的外观。gap属性可以同时设置行间距和列间距，也可以分别使用row-gap和column-gap单独设置。对齐属性包括justify-items控制项目的水平对齐，align-items控制垂直对齐。这些属性让Grid布局既强大又灵活。
Grid布局在实际应用中展现出强大的灵活性。左侧展示了典型的网页布局，包括头部、侧边栏、主内容区和底部，这种布局用Grid可以轻松实现。右侧是图片画廊的例子，不同大小的图片可以完美地排列在网格中。Grid布局让我们能够创建既美观又实用的现代网页设计。