CSS Grid布局教程(2026-03-27)

文档摘要

CSS Grid布局完全指南概述 CSS Grid布局（网格布局）是CSS中最强大的布局系统，它是一个二维布局系统，可以同时处理行和列。与Flexbox的一维布局不同，Grid非常适合构建复杂的页面布局，提供了灵活且强大的布局能力。基础概念 Grid容器和Grid项关键术语 Grid Container（网格容器）：应用的父元素 Grid Item（网格项）：网格容器的直接子元素 Grid Line（网格线）：构成网格结构的分界线 Grid Track（网格轨道）：两条相邻网格线之间的空间 Grid Cell（网格单元格）：最小的网格单位 Grid Area（网格区域）：由四条网格线围成的矩形区域基础语法定义网格使用fr单位 repeat()函数命名网格线间距 gap属性

CSS Grid布局完全指南

概述

CSS Grid布局（网格布局）是CSS中最强大的布局系统，它是一个二维布局系统，可以同时处理行和列。与Flexbox的一维布局不同，Grid非常适合构建复杂的页面布局，提供了灵活且强大的布局能力。

基础概念

Grid容器和Grid项


/* Grid容器 */
.container {
    display: grid;
}

/* Grid项 */
.container > div {
    /* 自动成为Grid项 */
}

关键术语

Grid Container（网格容器）：应用display: grid的父元素
Grid Item（网格项）：网格容器的直接子元素
Grid Line（网格线）：构成网格结构的分界线
Grid Track（网格轨道）：两条相邻网格线之间的空间
Grid Cell（网格单元格）：最小的网格单位
Grid Area（网格区域）：由四条网格线围成的矩形区域

基础语法

定义网格


.container {
    display: grid;
    grid-template-columns: 100px 200px 100px;  /* 三列 */
    grid-template-rows: 50px 100px;            /* 两行 */
}

使用fr单位


.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;  /* 1:2:1比例 */
    grid-template-rows: repeat(3, 1fr);  /* 三行等高 */
}

repeat()函数


.container {
    /* 四列等宽 */
    grid-template-columns: repeat(4, 1fr);
    
    /* 重复模式 */
    grid-template-columns: repeat(2, 100px 1fr);  /* 100px 1fr 100px 1fr */
    
    /* 自动填充 */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

命名网格线


.container {
    grid-template-columns: [start] 1fr [middle] 2fr [end];
    grid-template-rows: [header] 60px [content] 1fr [footer] 40px;
}

间距

gap属性


.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 200px);
    
    /* 行列间距相同 */
    gap: 20px;
    
    /* 行列间距不同 */
    row-gap: 20px;
    column-gap: 10px;
    
    /* 旧语法 */
    grid-gap: 20px;
    grid-row-gap: 20px;
    grid-column-gap: 10px;
}

Grid项定位

grid-column和grid-row


.item1 {
    /* 从第1条线到第3条线 */
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.item2 {
    /* 跨越2列2行 */
    grid-column: span 2;
    grid-row: span 2;
}

.item3 {
    /* 使用命名线 */
    grid-column: start / middle;
    grid-row: header / content;
}

grid-area


.item {
    /* grid-row-start / grid-column-start / grid-row-end / grid-column-end */
    grid-area: 1 / 1 / 3 / 3;
    
    /* 命名区域 */
    grid-area: header;
}

模板区域

定义区域


.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: 60px 1fr 40px;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    gap: 10px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

对齐方式

justify-items（水平对齐Grid项）


.container {
    justify-items: start;     /* 起点 */
    justify-items: end;       /* 终点 */
    justify-items: center;    /* 居中 */
    justify-items: stretch;   /* 拉伸（默认） */
}

align-items（垂直对齐Grid项）


.container {
    align-items: start;       /* 起点 */
    align-items: end;         /* 终点 */
    align-items: center;      /* 居中 */
    align-items: stretch;     /* 拉伸（默认） */
}

place-items（简写）


.container {
    place-items: center center;  /* 水平居中 垂直居中 */
}

justify-content（水平对齐整个网格）


.container {
    justify-content: start;      /* 起点 */
    justify-content: end;        /* 终点 */
    justify-content: center;     /* 居中 */
    justify-content: stretch;    /* 拉伸 */
    justify-content: space-between;  /* 两端对齐 */
    justify-content: space-around;   /* 环绕对齐 */
    justify-content: space-evenly;   /* 均匀对齐 */
}

align-content（垂直对齐整个网格）


.container {
    align-content: start;
    align-content: end;
    align-content: center;
    align-content: stretch;
    align-content: space-between;
    align-content: space-around;
    align-content: space-evenly;
}

实用布局示例

响应式网格


.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

圣杯布局


.holy-grail {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: 60px 1fr 40px;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
    min-height: 100vh;
}

@media (max-width: 768px) {
    .holy-grail {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
    }
}

卡片网格


.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px;
}

.card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 15px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

图片画廊


.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

表单布局


.form-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    align-items: center;
}

.form-group {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}

.form-group.full {
    grid-column: 1 / -1;
}

Grid项对齐

justify-self（单个Grid项水平对齐）


.item {
    justify-self: start;
    justify-self: end;
    justify-self: center;
    justify-self: stretch;
}

align-self（单个Grid项垂直对齐）


.item {
    align-self: start;
    align-self: end;
    align-self: center;
    align-self: stretch;
}

自动布局算法

grid-auto-flow


.container {
    grid-auto-flow: row;         /* 逐行填充（默认） */
    grid-auto-flow: column;      /* 逐列填充 */
    grid-auto-flow: row dense;   /* 紧凑填充 */
    grid-auto-flow: column dense;
}

grid-auto-rows和grid-auto-columns


.container {
    grid-auto-rows: 100px;          /* 自动行高 */
    grid-auto-columns: 1fr;         /* 自动列宽 */
    grid-auto-rows: minmax(100px, auto);
}

高级技巧

子网格（Subgrid）


.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.child {
    display: grid;
    grid-template-columns: subgrid;  /* 继承父网格的列 */
    grid-template-rows: subgrid;     /* 继承父网格的行 */
}

网格动画


@keyframes grid-fade {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.item {
    animation: grid-fade 0.3s ease-out;
}

叠加网格项


.item1 {
    grid-area: 1 / 1 / 2 / 2;
    z-index: 1;
}

.item2 {
    grid-area: 1 / 1 / 2 / 2;
    z-index: 2;
}

浏览器兼容性


/* 自动前缀 */
.container {
    display: -ms-grid;           /* IE 10-11 */
    display: grid;
    -ms-grid-columns: 1fr 2fr;   /* IE 10-11 */
    grid-template-columns: 1fr 2fr;
}

最佳实践

1. 使用fr单位实现弹性布局


.container {
    grid-template-columns: 1fr 2fr 1fr;  /* 灵活的列宽比例 */
}

2. 使用repeat()简化代码


.container {
    /* 推荐 */
    grid-template-columns: repeat(4, 1fr);
    
    /* 不推荐 */
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

3. 使用auto-fit和auto-fill实现响应式


.container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

4. 使用grid-template-area提高可读性


.container {
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
}

5. 合理使用gap间距


.container {
    gap: 20px;  /* 统一间距 */
}

Grid vs Flexbox

使用Grid的场景

二维布局（行和列）
复杂的页面布局
需要精确控制元素位置
需要重叠元素

使用Flexbox的场景

一维布局（行或列）
简单的组件布局
内容驱动的布局
需要动态调整元素大小

总结

CSS Grid布局是现代Web布局的强大工具，提供了二维布局能力，可以轻松实现复杂的页面布局。掌握Grid的基础语法和高级特性，可以大大提高布局效率和代码可维护性。结合Flexbox和其他CSS特性，可以构建灵活、响应式、易维护的Web界面。