CSS Grid布局详解

CSS Grid布局是CSS中最强大的布局系统，它是一个二维布局系统，可以同时处理行和列，非常适合创建复杂的网页布局。

一、Grid基本概念

1.1 容器和项目

Grid容器 ：使用display: grid或display: inline-grid的元素
Grid项目：Grid容器的直接子元素

css

复制代码

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

1.2 网格线

构成网格结构的分界线
分为水平网格线（行网格线）和垂直网格线（列网格线）

1.3 网格轨道

两条相邻网格线之间的空间
即行或列

1.4 网格单元格

四条网格线围成的区域
最小的网格单位

1.5 网格区域

一个或多个相邻的网格单元格组成的矩形区域

二、Grid容器属性

2.1 定义网格列和行

css

复制代码

.container {
  /* 定义列：三列，宽度分别为100px、auto、200px */
  grid-template-columns: 100px auto 200px;
  
  /* 定义行：三行，高度分别为100px、150px、auto */
  grid-template-rows: 100px 150px auto;
  
  /* 使用fr单位（分数单位） */
  grid-template-columns: 1fr 2fr 1fr; /* 中间列是两侧的两倍宽 */
  
  /* 使用repeat()函数 */
  grid-template-columns: repeat(3, 1fr); /* 创建3个等宽的列 */
  grid-template-columns: repeat(4, 100px); /* 创建4个100px宽的列 */
  grid-template-columns: 100px repeat(2, 1fr) 200px; /* 混合使用 */
  
  /* 定义网格区域 */
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

2.2 网格间距

css

复制代码

.container {
  /* 列间距 */
  column-gap: 20px;
  
  /* 行间距 */
  row-gap: 15px;
  
  /* 简写：row-gap column-gap */
  gap: 15px 20px;
  
  /* 统一设置行列间距 */
  gap: 15px;
}

2.3 隐式网格

当项目被放置在显式定义的网格之外时，浏览器会自动创建隐式网格轨道。

css

复制代码

.container {
  /* 定义隐式行的大小 */
  grid-auto-rows: 100px;
  
  /* 定义隐式列的大小 */
  grid-auto-columns: 150px;
  
  /* 控制自动放置算法 */
  grid-auto-flow: row; /* 默认值，按行填充 */
  grid-auto-flow: column; /* 按列填充 */
  grid-auto-flow: dense; /* 密集填充，尝试填充前面的空隙 */
}

2.4 对齐方式

css

复制代码

.container {
  /* 主轴（水平）对齐 - 整个网格在容器中的水平位置 */
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  
  /* 交叉轴（垂直）对齐 - 整个网格在容器中的垂直位置 */
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
  
  /* 网格项在网格区域内的水平对齐 */
  justify-items: start | end | center | stretch;
  
  /* 网格项在网格区域内的垂直对齐 */
  align-items: start | end | center | stretch;
  
  /* 简写：align-items justify-items */
  place-items: center stretch;
}

三、Grid项目属性

3.1 项目定位

css

复制代码

.item {
  /* 指定项目从哪条列网格线开始 */
  grid-column-start: 2;
  
  /* 指定项目从哪条列网格线结束 */
  grid-column-end: 4;
  
  /* 指定项目从哪条行网格线开始 */
  grid-row-start: 1;
  
  /* 指定项目从哪条行网格线结束 */
  grid-row-end: 3;
  
  /* 简写：grid-row-start / grid-column-start / grid-row-end / grid-column-end */
  grid-area: 1 / 2 / 3 / 4;
  
  /* 使用span关键字 */
  grid-column: 2 / span 2; /* 从第2列开始，跨越2列 */
  grid-row: 1 / span 3; /* 从第1行开始，跨越3行 */
}

3.2 指定网格区域

css

复制代码

.item {
  /* 引用grid-template-areas定义的区域名 */
  grid-area: header;
}

3.3 单个项目对齐

css

复制代码

.item {
  /* 单个项目在网格区域内的水平对齐 */
  justify-self: start | end | center | stretch;
  
  /* 单个项目在网格区域内的垂直对齐 */
  align-self: start | end | center | stretch;
  
  /* 简写：align-self justify-self */
  place-self: center end;
}

四、实用示例

4.1 基础网格布局

css

复制代码

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

.item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

4.2 经典页面布局

css

复制代码

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-rows: 80px 1fr 60px;
  grid-template-columns: 200px 1fr;
  height: 100vh;
  gap: 10px;
}

.header { 
  grid-area: header; 
  background: #3498db;
}

.sidebar { 
  grid-area: sidebar; 
  background: #2ecc71;
}

.main { 
  grid-area: main; 
  background: #ecf0f1;
}

.footer { 
  grid-area: footer; 
  background: #34495e;
}

4.3 响应式网格

css

复制代码

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

/* 媒体查询结合Grid */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
  
  .container {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

4.4 复杂网格布局

css

复制代码

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

.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.item-2 {
  grid-column: 3 / span 2;
  grid-row: 1 / span 2;
}

.item-3 {
  grid-column: 1;
  grid-row: 2 / span 2;
}

.item-4 {
  grid-column: 2 / span 3;
  grid-row: 3;
}

五、Grid函数

5.1 repeat() 函数

css

复制代码

.container {
  /* 重复模式 */
  grid-template-columns: repeat(3, 100px); /* 3列，每列100px */
  
  /* 自动填充 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  
  /* 自动适应 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

5.2 minmax() 函数

css

复制代码

.container {
  /* 列宽最小200px，最大1fr */
  grid-template-columns: minmax(200px, 1fr) 1fr;
  
  /* 与repeat结合 */
  grid-template-columns: repeat(3, minmax(100px, 300px));
}

5.3 fit-content() 函数

css

复制代码

.container {
  /* 宽度不超过300px，但可以小于内容宽度 */
  grid-template-columns: fit-content(300px) 1fr;
}

六、浏览器兼容性

现代浏览器全面支持
IE10/11支持旧版Grid语法（带-ms-前缀）
建议使用Autoprefixer处理兼容性

七、Grid与Flexbox对比

特性	Grid	Flexbox
维度	二维（行和列）	一维（行或列）
布局方向	同时定义行和列	单一方向（主轴）
项目控制	可精确控制行列位置	沿主轴或交叉轴对齐
适用场景	整体页面布局、复杂二维布局	组件内部布局、一维排列

总结

CSS Grid布局是现代网页布局的强大工具，特别适合构建复杂的二维布局。它提供了更直观、更灵活的方式来控制网页元素的位置和大小，大大简化了传统布局方法的复杂性。

在实际项目中，通常结合Grid（用于整体布局）和Flexbox（用于组件内部布局）使用，以获得最佳的布局效果。