CSS Grid布局是现代CSS中最强大的布局系统。它是一个二维系统，这意味着它可以同时处理列和行，不像flexbox主要是一维的。通过Grid布局，我们可以轻松创建复杂的网页布局，而无需使用浮动或定位等传统技术。

基础概念

什么是Grid布局？

Grid布局是一个二维网格系统，用于布局页面内容。它由容器（container）和项目（items）组成。

• Grid Container（网格容器）：应用了display: grid的元素
• Grid Item（网格项目）：网格容器的直接子元素
• Grid Line（网格线）：分割行和列的线，编号从1开始
• Grid Track（网格轨道）：两个相邻网格线之间的区域（行或列）
• Grid Cell（网格单元）：两个相邻的行网格线和两个相邻的列网格线组成的区域
• Grid Area（网格区域）：由一个或多个网格单元组成的矩形区域

基本用法

创建Grid容器

.container {
    display: grid; /* 或 inline-grid */
}

定义网格结构

使用grid-template-columns和grid-template-rows属性来定义网格的列和行。

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 创建3个等宽的列 */
    grid-template-rows: 100px 200px; /* 创建2个高度分别为100px和200px的行 */
    gap: 10px; /* 设置行和列之间的间距 */
}

fr单位是一个灵活的长度单位，代表网格容器中可用空间的一部分。在上面的例子中，每个列将占据容器宽度的1/3。

使用repeat()函数

对于重复的模式，我们可以使用repeat()函数来简化代码。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 等同于 1fr 1fr 1fr */
    grid-template-rows: repeat(2, auto); /* 自动高度，重复2次 */
    gap: 10px;
}

网格项目的放置

基于行和列的放置

我们可以使用grid-column-start, grid-column-end, grid-row-start, grid-row-end属性来精确放置网格项目。

.item-1 {
    grid-column-start: 1;
    grid-column-end: 3;
    /* 这个项目将从第1条列线开始，到第3条列线结束，跨越2个列 */
}

.item-2 {
    grid-row-start: 1;
    grid-row-end: 3;
    /* 这个项目将从第1条行线开始，到第3条行线结束，跨越2个行 */
}

也可以使用简写形式：

.item-1 {
    grid-column: 1 / 3; /* 等同于 grid-column-start: 1; grid-column-end: 3; */
}

.item-2 {
    grid-row: 1 / 3; /* 等同于 grid-row-start: 1; grid-row-end: 3; */
}

使用网格区域

我们可以使用grid-area属性结合grid-template-areas来创建更直观的布局。

.container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar content"
        "sidebar content"
        "footer footer";
    gap: 10px;
    height: 100vh;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}

高级功能

自动填充和自动适应

auto-fill和auto-fit关键字允许网格容器根据可用空间自动调整列数。

/* 自动填充：尽可能多的创建列，但不会收缩现有列 */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

/* 自动适应：调整列数以适应容器，会拉伸现有列 */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

网格对齐

Grid提供了强大的对齐功能，用于控制网格项目在其单元格内以及整个网格在容器内的对齐方式。

/* 网格容器上的对齐属性 */
.container {
    display: grid;
    justify-content: center; /* 水平方向上的网格对齐 */
    align-content: center; /* 垂直方向上的网格对齐 */
    
    /* 简写 */
    place-content: center center;
    
    /* 项目在单元格内的对齐 */
    justify-items: center; /* 项目在单元格内水平对齐 */
    align-items: center; /* 项目在单元格内垂直对齐 */
    
    /* 简写 */
    place-items: center center;
}

/* 单个项目的对齐 */
.item {
    justify-self: center; /* 单个项目的水平对齐 */
    align-self: center; /* 单个项目的垂直对齐 */
    
    /* 简写 */
    place-self: center center;
}

隐式网格

当我们没有明确定义所有行时，Grid会自动创建隐式网格。我们可以使用grid-auto-rows和grid-auto-columns来控制这些隐式创建的轨道。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto); /* 隐式行的最小高度为100px */
    gap: 10px;
}

响应式布局

结合媒体查询，我们可以创建完全响应式的网格布局。

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

/* 中等屏幕 */
@media (min-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .header,
    .footer {
        grid-column: span 2;
    }
}

/* 大屏幕 */
@media (min-width: 1200px) {
    .container {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .header,
    .footer {
        grid-column: span 4;
    }
    
    .content {
        grid-column: span 3;
    }
}

实际应用示例

卡片网格

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

.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 20px;
}

页面布局

.page-layout {
    display: grid;
    grid-template-columns: 250px 1fr 250px;
    grid-template-rows: 60px 1fr 60px;
    grid-template-areas:
        "header header header"
        "sidebar main widgets"
        "footer footer footer";
    height: 100vh;
    gap: 0;
}

@media (max-width: 1024px) {
    .page-layout {
        grid-template-columns: 200px 1fr;
        grid-template-areas:
            "header header"
            "sidebar main"
            "widgets widgets"
            "footer footer";
    }
}

@media (max-width: 768px) {
    .page-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "widgets"
            "footer";
    }
}

Browser Support

CSS Grid布局在所有现代浏览器中都得到了很好的支持，包括Chrome、Firefox、Safari和Edge的最新版本。对于IE11，它提供了部分支持，但需要使用旧的语法。

总结

CSS Grid布局是一个强大的工具，让我们能够创建复杂且灵活的网页布局。通过本文介绍的概念和技巧，你应该能够开始在你的项目中使用Grid布局了。无论是简单的卡片网格还是复杂的页面布局，Grid都能胜任。

与Flexbox结合使用时，Grid布局能够解决几乎所有的布局问题，为现代Web设计提供了无限的可能性。