CSS Grid 是目前最强大的 CSS 布局系统，它让我们可以告别 float 布局的痛苦。

基础概念

Grid 布局的核心是「网格容器」和「网格项」。

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

常用属性

grid-template-columns

定义列的数量和宽度：

/* 固定列 */
grid-template-columns: 200px 1fr 200px;

/* 自动填充 */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

grid-area

通过命名区域来布局：

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

实战：卡片网格

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

Grid 布局让复杂的页面布局变得简单直观，强烈推荐。