HTML教程：运用Grid布局实现页面布局

在网页设计中，页面布局是至关重要的一环。而Grid布局，即网格布局，作为CSS中强大的布局模型，为开发者提供了一种灵活且高效的方式来创建各种页面布局。

Grid布局将网页视为一个二维网格容器，通过行和列来划分空间。要使用Grid布局，首先需在父元素上设置 display: grid 或 display: inline-grid。display: grid 会使元素作为块级元素创建网格容器，而 display: inline-grid 则让元素以行内元素的形式创建网格容器。

定义网格容器后，就可以设置网格的列和行。使用 grid-template-columns 属性来定义列的宽度，grid-template-rows 属性定义行的高度。例如，grid-template-columns: 1fr 2fr 1fr，这里的 fr 是一个灵活的单位，它会根据可用空间按比例分配宽度，上述代码表示将列宽分为三份，中间列宽是两侧列宽的两倍。同样，grid-template-rows: 50px auto 100px，分别设置了行的高度为固定的50像素、根据内容自适应高度、固定的100像素。

除了定义行列大小，还能控制网格项在网格容器中的位置。justify-items 属性控制网格项在列方向上的对齐方式，取值有 start（左对齐）、end（右对齐）、center（居中对齐）和 stretch（拉伸以填充列空间）；align-items 属性控制网格项在行方向上的对齐方式，取值与 justify-items 类似。

grid-column 和 grid-row 属性可指定网格项跨越的列数和行数。比如，grid-column: 1 / 3 表示该网格项从第一列开始，跨越到第三列。

运用Grid布局，不仅可以轻松实现常见的两栏、三栏布局，还能创建复杂的多列多行布局。它让网页布局更加直观、灵活，极大提高了开发效率。掌握Grid布局技巧，能为你的网页设计增添更多创意和可能性，打造出更加美观、实用的页面布局。