CSS Grid网格布局从入门到精通，构建二维响应式布局教程

2025年10月31日农场开发者 1 浏览

CSS Grid是当今最强大的二维布局系统。它将网页划分为行和列，让你能够像设计图纸一样精确地控制元素的位置和大小。

本文将引导你构建你的第一个网格布局，让你更好的学会如何使用CSS布局呈现出完美的网页。

一、Grid是什么？

CSS Grid布局是一个用于网页的二维布局系统，意味着它可以同时处理行和列。这与Flexbox主要处理一个方向（一维）形成对比。Grid是创建复杂整体页面布局的理想选择。

二、基本概念：网格容器与网格项目

将元素设置为display: grid，它就成为网格容器，其直接子元素则成为网格项目。

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

三、定义网格轨道

使用grid-template-columns和grid-template-rows属性来定义网格的行和列（称为“轨道”）。

定义列和行：

.container {
    display: grid;
    grid-template-columns: 200px 1fr 100px; /* 三列：200px， 剩余空间， 100px */
    grid-template-rows: 100px 400px; /* 两行 */
    gap: 20px; /* 行和列之间的间隙（取代旧的 grid-gap） */
}

fr单位：表示网格容器中的剩余空间分配比例，非常灵活。

使用repeat()函数：简化重复模式。

.container {
    grid-template-columns: repeat(3, 1fr); /* 等同于 1fr 1fr 1fr */
    grid-template-rows: repeat(2, 150px);
}

四、放置网格项目

默认情况下，项目会按顺序自动填充网格单元格。但你可以精确控制项目的位置。

基于线的放置：通过指定项目从哪条网格线开始到哪条结束来放置。

.header {
    grid-column-start: 1;
    grid-column-end: 4; /* 从第1条纵线延伸到第4条（占据3列） */
    grid-row-start: 1;
    grid-row-end: 2;
}
/* 简写 */
.header {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
}

使用grid-template-areas：一种更直观的布局方法。

.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 1fr 2fr 2fr;
}

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

五、总结

CSS Grid为网页布局带来了前所未有的控制力。对于整体页面结构（如Header， Sidebar， Main， Footer），Grid是首选方案。结合Flexbox（用于组件内部的一维布局），你几乎可以应对任何布局挑战。

css