记录---CSS Grid 布局：现代网页布局的强大工具

匿名上传

发布时间:2025-08-27 14:58:57

CSS Grid 布局（网格布局）是 CSS 中一种强大的二维布局系统，它彻底改变了我们构建网页布局的方式。与传统的布局方法（如浮动、定位或 Flexbox）相比，Grid 提供了更直观、更灵活的方式来创建复杂的网页布局。

一、Grid 布局的基本概念

1. 什么是 Grid 布局？

CSS Grid 是一个二维布局系统，可以同时处理行和列的布局。它允许开发者将页面划分为多个区域，并精确定位和调整这些区域的大小和位置。

2. 核心术语

Grid Container（网格容器）：应用 display: grid 的元素
Grid Item（网格项）：网格容器的直接子元素
Grid Line（网格线）：构成网格结构的分界线
Grid Track（网格轨道）：两条相邻网格线之间的空间（行或列）
Grid Cell（网格单元格）：四条网格线包围的最小单位
Grid Area（网格区域）：任意数量的网格单元格组成的矩形区域

二、创建基本 Grid 布局

1. 定义一个网格容器

.container {  display: grid;  grid-template-columns: 100px 200px 100px;  /* 3列，宽度分别为100px,200px,100px */  grid-template-rows: 100px 200px;           /* 2行，高度分别为100px,200px */  gap: 10px;                                /* 网格项之间的间距 */}

2. 简单的网格示例

<div class="container">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div>  <div class="item">6</div></div>

.container {  display: grid;  grid-template-columns: repeat(3, 1fr);  /* 3列，每列等宽 */  grid-template-rows: 100px 100px;        /* 2行，每行100px高 */  gap: 15px;}.item {  background: #4CAF50;  padding: 20px;  text-align: center;}

三、Grid 布局的核心特性

1. 灵活的轨道大小

fr 单位：表示网格容器中的可用空间的一部分
minmax() 函数：定义大小范围
auto 关键字：根据内容自动调整

.container {  grid-template-columns: 1fr minmax(200px, 1fr) 1fr;  grid-template-rows: auto 1fr auto;}

2. 响应式布局

.container {  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));}

这个设置会创建尽可能多的 200px 宽的列来填充容器，如果空间不足则换行。

3. 网格项定位

可以精确控制网格项的位置：

.item {  grid-column-start: 1;  grid-column-end: 3;  grid-row-start: 1;  grid-row-end: 2;}/* 简写形式 */.item {  grid-column: 1 / 3;  /* 从第1列线到第3列线 */  grid-row: 1 / 2;     /* 从第1行线到第2行线 */}/* 跨越整个网格 */.item {  grid-column: 1 / -1;  /* 从第1列线到最后1列线 */}

4. 命名网格线和区域

.container {  display: grid;  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];  grid-template-rows: [header-start] 80px [header-end main-start] 1fr [main-end footer-start] 80px [footer-end];  grid-template-areas:    "header header header"    "sidebar content content"    "footer footer footer";}.header {  grid-area: header;}.sidebar {  grid-area: sidebar;}.content {  grid-area: content;}.footer {  grid-area: footer;}

四、Grid 布局的实际应用

1. 经典网页布局

.layout {  display: grid;  grid-template-columns: 250px 1fr;  grid-template-rows: 80px 1fr 100px;  grid-template-areas:    "header header"    "sidebar main"    "footer footer";  min-height: 100vh;}.header { grid-area: header; }.sidebar { grid-area: sidebar; }.main { grid-area: main; }.footer { grid-area: footer; }

2. 图片画廊

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

3. 产品卡片网格

.products {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 30px;}@media (max-width: 900px) {  .products {    grid-template-columns: repeat(2, 1fr);  }}@media (max-width: 600px) {  .products {    grid-template-columns: 1fr;  }}

五、Grid 与 Flexbox 的比较

经验法则：

使用 Grid 进行宏观布局（整个页面的结构）
使用 Flexbox 进行微观布局（组件内部的排列）

六、浏览器支持与渐进增强

CSS Grid 已被所有现代浏览器支持（包括 Edge 16+）。对于旧版浏览器，可以采用渐进增强的策略：

.container {  display: flex;          /* 回退方案 */  flex-wrap: wrap;}@supports (display: grid) {  .container {    display: grid;    grid-template-columns: repeat(3, 1fr);    flex-wrap: initial;  }}