CSS Grid布局完全指南：从入门到精通 | 前端开发教程

Grid布局简介

CSS Grid布局是CSS中最强大的布局系统之一。它是一个二维网格系统，专为同时处理行和列而设计，与Flexbox的一维布局形成鲜明对比。Grid布局使开发者能够轻松创建复杂、响应式的网页设计，而无需依赖浮动或定位等传统方法。

自2017年起，所有现代浏览器都已支持CSS Grid，使其成为网页布局的可靠选择。本文将深入探讨Grid布局的核心概念、属性和实际应用。

基本概念

在开始使用Grid之前，了解其基本组成部分至关重要：

• 网格容器(Grid Container)：应用display: grid的元素
• 网格项目(Grid Items)：网格容器的直接子元素
• 网格线(Grid Lines)：构成网格结构的分隔线
• 网格轨道(Grid Tracks)：相邻网格线之间的空间（行或列）
• 网格单元格(Grid Cell)：两个相邻行线和列线之间的空间
• 网格区域(Grid Area)：由一个或多个网格单元格组成的矩形区域

容器属性详解

要创建网格布局，首先需要定义一个网格容器：

.container {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: 100px auto 100px;
    grid-gap: 20px;
}

grid-template-columns 和 grid-template-rows

这些属性定义了网格的列和行的大小。可以使用各种单位：px, %, fr, auto等。

fr单位表示网格容器中的可用空间的一部分，非常灵活：

grid-template-columns: 1fr 2fr 1fr; /* 中间列是两侧列的两倍宽 */

grid-template-areas

这个属性提供了一种直观的方式来定义网格区域：

.container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar content content"
        "footer footer footer";
}

gap (formerly grid-gap)

控制网格项之间的间距：

.container {
    gap: 20px; /* 行和列间距都是20px */
    /* 或者分别设置 */
    row-gap: 15px;
    column-gap: 30px;
}

项目属性详解

定义了网格容器后，可以控制每个网格项在网格中的位置：

grid-column 和 grid-row

这些属性定义了网格项在网格中的位置：

.item {
    grid-column: 1 / 3; /* 从第1条列线开始到第3条列线结束 */
    grid-row: 2 / 4;    /* 从第2条行线开始到第4条行线结束 */
}

/* 简写方式 */
.item {
    grid-area: 2 / 1 / 4 / 3; /* row-start / column-start / row-end / column-end */
}

grid-area

这个属性可以引用由grid-template-areas定义的区域名称：

.header {
    grid-area: header;
}
.sidebar {
    grid-area: sidebar;
}
.content {
    grid-area: content;
}
.footer {
    grid-area: footer;
}

实战案例：博客布局

让我们创建一个典型的博客布局，包含页眉、侧边栏、主内容和页脚：

网站标题

文章标题

这里是文章内容…