企业官网建设流程全解析

一、前言

网页布局分为一维与二维两类，Flex 擅长单条轴线的元素排布，而Grid（网格布局）是 CSS 原生二维布局方案，可以同时管控行与列，一次性构建完整网格。 适合整体页面框架、复杂卡片墙、图片画廊、多列不规则排版这类场景，是现代前端页面搭建的核心能力。

开启网格布局：父容器设置display: grid，直接子元素自动成为网格项。

二、基础概念：网格容器、网格项、网格线、网格轨道

• 网格容器：添加display:grid的父元素
• 网格项：容器的直接子元素
• 网格线：划分网格的分割线，分为列线、行线，从 1 开始编号，支持负数反向计数
• 网格轨道：两条网格线之间的区域，横向为行轨道，纵向为列轨道
• 单元格：单行单列围成的最小格子
• 网格区域：由多个单元格合并组成的大块区域

三、容器属性（写在父容器上）

1. grid-template-columns /grid-template-rows 定义行列尺寸

用来设置有多少列、多少行，以及每一格的宽度、高度。

.wrap { display: grid; /* 3列，每列1fr，三等分 */ grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px 100px; }

• fr网格专属单位，代表剩余空间份数，非常适合自适应均分
• 支持px、%、auto、minmax(min,max)
• repeat(数量, 尺寸)简写，repeat(3,1fr)等价于1fr 1fr 1fr

2. gap 网格间距

设置单元格之间间隙，分为行间距、列间距，替代 margin，不会在容器边缘产生边距

.wrap { row-gap: 16px; column-gap: 20px; /* 简写 gap: 行间距 列间距 */ gap:16px 20px; }

3. justify-items 单元格内水平对齐

控制每个网格项，在单元格内部水平方向对齐 可选值：stretch(默认拉伸)、start、center、end

4. align-items 单元格内垂直对齐

控制网格项在单元格内部垂直方向对齐，取值同上。

5. justify-content / align-content

当网格总尺寸小于容器尺寸时，控制整个网格整体在容器内的位置。

区分：items 是格子内部元素对齐；content 是整个网格块在父容器对齐。

四、网格项属性（写在子元素上）

1. grid-column 跨列 | grid-row 跨行

控制子元素跨越几条网格线，实现格子合并，Grid 最强大的能力之一。

.item-big { /* 从第1条列线到第3条列线，跨2列 */ grid-column: 1 / 3; grid-row: 1 / 2; }

简写span 数字，代表跨越轨道数量grid-column: span 2;表示直接跨 2 列

2. justify-self / align-self

单独修改单个网格项在单元格内部的对齐，优先级高于父容器justify-items。

3. grid-area

可以一次性同时指定跨行跨列，也可配合grid-template-areas命名区域排版，适合页面整体骨架搭建。

五、常用实战示例

示例 1：简单自适应卡片画廊

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

auto-fill 自动填充，屏幕足够就多放卡片，空间变小自动减少列数，响应式神器

示例 2：经典页面骨架（头部、侧边、主内容、底部）

.page { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 80px 1fr 60px; grid-template-areas: "header header" "sidebar main" "footer footer"; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }

六、Grid 与 Flex 选型对比

1. Flex：一维布局，沿着一条轴线排列；适合导航、按钮组、单行卡片、元素对齐
2. Grid：二维布局，同时控制行列；适合页面整体布局、图片墙、不规则多格子排版

开发口诀：组件内一维用 Flex，页面整体二维用 Grid

七、实践要点与避坑

1. fr只分配剩余空间，不会压缩设置了固定 px 尺寸的轨道
2. auto-fill /auto-fit 容易混淆：auto-fill 保留空轨道；auto-fit 会收缩空轨道，更常用
3. 网格项默认拉伸填满单元格，不想拉伸可以设置align-self/justify-self
4. Grid 和 Flex 可以嵌套组合，Grid 做大框架，内部小元素继续使用 Flex 对齐

八、知识小结

Grid 作为二维布局方案，把页面布局从浮动时代的复杂 hack 中解放。掌握行列定义、轨道单位与区域命名，就可以快速搭建复杂页面骨架。实际开发中不要一味只用 Grid，和 Flex 搭配使用，才是现代 CSS 布局最优解。