DevBlog

CSS Grid 布局入门指南

发表于 2026-07-20 · 前端

---

CSS Grid 是 CSS 中最强大的布局系统之一，它让我们可以轻松地创建复杂的二维布局结构。

什么是 Grid 布局？

Grid 布局是一种二维布局系统，可以同时控制行和列的排列，非常适合页面整体布局和复杂组件的设计。

基本概念

• Grid Container — 通过 display: grid 创建网格容器
• Grid Item — 容器的直接子元素
• Grid Line — 构成网格结构的分隔线
• Grid Cell — 相邻行列线围成的最小单元

快速上手

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

上面的代码创建了一个三列等宽的网格，列间距为 20px。