前端开发笔记

Appearance

CSS Grid 布局：强大的二维布局系统 ​

引言 ​

在Web页面日益复杂的今天，我们需要一种更强大的布局系统来创建复杂的网页设计。CSS Grid布局（网格布局）应运而生，它是CSS中第一个真正的二维布局系统，专为解决复杂的页面布局问题而设计。

与一维布局系统（如Flexbox）不同，Grid布局允许开发者同时控制行和列，使得设计更加灵活。无论是简单的两栏布局，还是复杂的杂志风格排版，Grid都能以简洁的方式实现。

本文将深入探讨Grid布局的核心概念、实用技巧和最佳实践，帮助你掌握这一强大的布局工具。

Grid 布局的核心概念 ​

在开始使用Grid布局之前，需要了解几个核心概念：

  1. Grid容器（Grid Container）：设置了display: grid或display: inline-grid的元素
  2. Grid项目（Grid Items）：Grid容器的直接子元素
  3. Grid线（Grid Lines）：构成网格结构的水平和垂直线
  4. Grid单元格（Grid Cell）：网格中的最小单位，由四条网格线围成的空间
  5. Grid区域（Grid Area）：由任意数量的网格单元格组成的矩形区域
  6. Grid轨道（Grid Track）：两条相邻网格线之间的空间，即行或列
html
<div class="grid-container">  <!-- 这是Grid容器 -->
  <div class="item">1</div>   <!-- 这些是Grid项目 -->
  <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>

<style>
  .grid-container {
    display: grid; /* 或 inline-grid */
    grid-template-columns: 100px 100px 100px; /* 创建三列，每列宽100px */
    grid-template-rows: 100px 100px; /* 创建两行，每行高100px */
  }
</style>

在这个例子中，我们创建了一个3×2的网格，共有6个网格单元格。每个项目默认占据一个单元格。

Grid 容器的属性 ​

Grid布局的强大之处在于其丰富的属性，允许精确控制布局的各个方面。以下是Grid容器的核心属性：

1. grid-template-columns 和 grid-template-rows：定义列和行 ​

这两个属性分别用于定义网格的列和行的大小：

css
.grid-container {
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 50px 100px;
}

这里创建了三列（宽度分别为100px、200px和自动填充剩余空间）和两行（高度分别为50px和100px）。

fr单位和repeat()函数 ​

Grid布局引入了一个新的单位fr（fraction，分数），用于按比例分配剩余空间：

css
.grid-container {
  grid-template-columns: 1fr 2fr 1fr; /* 按1:2:1的比例分配宽度 */
}

对于重复的值，可以使用repeat()函数：

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

minmax()函数 ​

minmax()函数定义了一个大小范围，即最小值和最大值：

css
.grid-container {
  grid-template-columns: minmax(100px, 1fr) 2fr 1fr;
  /* 第一列最小宽度100px，最大可以扩展到1fr */
}

auto-fill 和 auto-fit ​

repeat()函数结合auto-fill或auto-fit可以创建响应式的网格：

css
.grid-container {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* 自动填充尽可能多的列，每列最小宽度200px，最大1fr */
}

auto-fill和auto-fit的区别在于，当容器宽度足够大时，auto-fill会继续创建空的网格轨道，而auto-fit会扩展已有的网格轨道。

2. grid-template-areas：通过命名定义网格区域 ​

grid-template-areas属性允许通过命名的方式定义网格区域，非常直观：

css
.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "header header header"
    "sidebar content aside"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

这段代码创建了一个经典的三列布局，带有页眉和页脚。通过可视化的字符串定义，能够直观地看出页面结构。

3. grid-template：grid-template-*的简写 ​

grid-template是grid-template-columns、grid-template-rows和grid-template-areas的简写：

css
.grid-container {
  grid-template: 
    "header header header" auto
    "sidebar content aside" 1fr
    "footer footer footer" auto
    / 1fr 3fr 1fr;
}

这等同于前面的例子，但代码更简洁。斜杠后面的部分定义了列宽。

4. grid-column-gap, grid-row-gap 和 grid-gap：定义间距 ​

这些属性用于设置网格线的宽度，即行和列之间的间距：

css
.grid-container {
  grid-column-gap: 20px; /* 列间距 */
  grid-row-gap: 10px; /* 行间距 */
  
  /* 或者使用简写 */
  grid-gap: 10px 20px; /* 行间距 列间距 */
}

注意：新标准已经将这些属性重命名为column-gap、row-gap和gap，但为了兼容性，两种写法都可以使用。

5. justify-items 和 align-items：对齐网格项目 ​

这两个属性控制网格项目在其网格区域内的水平和垂直对齐方式：

css
.grid-container {
  justify-items: start | end | center | stretch; /* 水平对齐 */
  align-items: start | end | center | stretch; /* 垂直对齐 */
}

stretch是默认值，会使项目填满整个网格区域。

6. justify-content 和 align-content：对齐整个网格 ​

当网格总大小小于容器大小时，这两个属性控制整个网格在容器中的对齐方式：

css
.grid-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; /* 垂直对齐 */
}

7. grid-auto-columns 和 grid-auto-rows：自动创建的轨道大小 ​

当网格项目被放置在显式定义的网格外部时，Grid会自动创建隐式轨道。这两个属性定义了这些自动创建的轨道的大小：

css
.grid-container {
  grid-auto-columns: 100px; /* 自动创建的列宽为100px */
  grid-auto-rows: minmax(100px, auto); /* 自动创建的行高最小100px，最大自适应内容 */
}

8. grid-auto-flow：自动放置算法 ​

该属性控制自动放置的网格项目如何流入网格：

css
.grid-container {
  grid-auto-flow: row | column | row dense | column dense;
}

row（默认值）按行填充，column按列填充。添加dense关键字可以尝试填充网格中的空白，可能会改变项目的顺序。

9. grid：全部属性的简写 ​

grid属性是所有Grid容器属性的简写：

css
.grid-container {
  grid: 100px 1fr / 50px 1fr 100px;
  /* 等同于：
  grid-template-rows: 100px 1fr;
  grid-template-columns: 50px 1fr 100px;
  */
}

Grid 项目的属性 ​

除了容器属性外，Grid布局还允许通过设置项目的属性来控制单个项目的位置和大小。以下是Grid项目的核心属性：

1. grid-column-start, grid-column-end, grid-row-start, grid-row-end：指定项目位置 ​

这些属性用于指定网格项目的具体位置，即从哪条网格线开始到哪条网格线结束：

css
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

这会使项目1占据第1条到第3条列网格线之间、第1条到第2条行网格线之间的区域（即第1行、第1列和第2列）。

2. grid-column 和 grid-row：简写属性 ​

这是上面四个属性的简写形式：

css
.item-1 {
  grid-column: 1 / 3; /* 等同于 grid-column-start: 1; grid-column-end: 3; */
  grid-row: 1 / 2; /* 等同于 grid-row-start: 1; grid-row-end: 2; */
}

也可以使用span关键字指定跨越的轨道数量：

css
.item-1 {
  grid-column: 1 / span 2; /* 从第1条列线开始，跨越2个轨道 */
  grid-row: 1 / span 1; /* 从第1条行线开始，跨越1个轨道 */
}

3. grid-area：更简洁的简写或引用模板区域 ​

grid-area既可以作为上述四个属性的简写，也可以用来引用通过grid-template-areas定义的命名区域：

css
/* 作为简写 */
.item-1 {
  grid-area: 1 / 1 / 2 / 3; /* 行开始 / 列开始 / 行结束 / 列结束 */
}

/* 引用命名区域 */
.header {
  grid-area: header; /* 对应grid-template-areas中定义的"header"区域 */
}

4. justify-self 和 align-self：单个项目的对齐方式 ​

这两个属性控制单个网格项目在其网格区域内的对齐方式，可以覆盖容器的justify-items和align-items属性：

css
.item-1 {
  justify-self: start | end | center | stretch; /* 水平对齐 */
  align-self: start | end | center | stretch; /* 垂直对齐 */
}

Grid 布局实战 ​

了解了Grid的基本概念和属性后，来看一些实际应用场景，以及如何使用Grid解决常见的布局问题。

1. 基础网格布局 ​

最简单的网格布局是创建一个均匀的网格：

html
<div class="basic-grid">
  <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>

<style>
  .basic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
  }
  
  .item {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
  }
</style>

这会创建一个3列等宽的网格，列间距为20px。

2. 响应式卡片布局 ​

使用auto-fit和minmax()可以创建自适应的卡片布局，无需媒体查询：

html
<div class="card-grid">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
  <div class="card">卡片4</div>
  <div class="card">卡片5</div>
  <div class="card">卡片6</div>
</div>

<style>
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
  
  .card {
    background-color: #f0f0f0;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
</style>

这个网格会根据容器宽度自动调整列数，每列最小宽度为250px，最大为1fr。

3. 经典的页面布局（页眉、页脚、侧边栏、主内容） ​

使用Grid可以轻松创建传统的页面布局：

html
<div class="page-layout">
  <header>页眉</header>
  <nav>导航栏</nav>
  <main>主内容区</main>
  <aside>侧边栏</aside>
  <footer>页脚</footer>
</div>

<style>
  .page-layout {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
      "header header header"
      "nav main aside"
      "footer footer footer";
    min-height: 100vh;
    gap: 10px;
  }
  
  header { grid-area: header; background-color: #f8f9fa; padding: 20px; }
  nav { grid-area: nav; background-color: #e9ecef; padding: 20px; }
  main { grid-area: main; background-color: #dee2e6; padding: 20px; }
  aside { grid-area: aside; background-color: #e9ecef; padding: 20px; }
  footer { grid-area: footer; background-color: #f8f9fa; padding: 20px; }
  
  /* 响应式调整 */
  @media (max-width: 768px) {
    .page-layout {
      grid-template-columns: 1fr;
      grid-template-areas: 
        "header"
        "nav"
        "main"
        "aside"
        "footer";
    }
  }
</style>

这个布局在大屏幕上是三列布局，在小屏幕上自动变为单列布局。

4. 不规则布局（画廊布局） ​

Grid的强大之处在于可以轻松创建不规则的布局：

html
<div class="gallery">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
</div>

<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 150px);
    grid-gap: 10px;
  }
  
  .item {
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
  }
  
  .item-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    background-color: #ffcccc;
  }
  
  .item-2 {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
    background-color: #ccffcc;
  }
  
  .item-3 {
    grid-column: 3 / 4;
    grid-row: 2 / 4;
    background-color: #ccccff;
  }
  
  .item-4 {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
    background-color: #ffffcc;
  }
  
  .item-5 {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    background-color: #ffccff;
  }
</style>

这个画廊布局包含不同大小的项目，创造出视觉上的层次感。

5. 自动放置的网格布局 ​

有时我们不需要精确控制每个项目的位置，可以使用Grid的自动放置算法：

html
<div class="auto-grid">
  <div class="item item-big">大项目</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>

<style>
  .auto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
    grid-gap: 10px;
  }
  
  .item {
    background-color: #f0f0f0;
    padding: 20px;
  }
  
  .item-big {
    grid-column: auto / span 2;
    grid-row: auto / span 2;
    background-color: #ffcccc;
  }
</style>

在这个例子中，大项目会占据2x2的空间，其他项目会自动填充剩余空间。

Grid 布局的常见问题与解决方案 ​

使用Grid布局时可能会遇到一些常见问题，以下是这些问题及其解决方案：

1. 不熟悉网格线的编号 ​

问题：难以记住和计算网格线的编号，特别是在复杂布局中。

解决方案：可以使用命名网格线：

css
.grid-container {
  grid-template-columns: [start] 1fr [middle] 2fr [end];
  grid-template-rows: [top] auto [center] 1fr [bottom];
}

.item {
  grid-column: start / end;
  grid-row: top / center;
}

2. 嵌套网格的对齐问题 ​

问题：当网格嵌套时，内部网格的轨道可能与外部网格不对齐。

解决方案：使用subgrid（注意：这是一个相对新的特性，兼容性可能有限）：

css
.outer-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}

.inner-grid {
  grid-column: 2 / 8;
  display: grid;
  grid-template-columns: subgrid;
}

3. 自动创建的行/列过小 ​

问题：当内容溢出时，自动创建的行或列可能太小。

解决方案：使用grid-auto-rows和grid-auto-columns设置默认大小：

css
.grid-container {
  grid-auto-rows: minmax(100px, auto);
  grid-auto-columns: minmax(100px, auto);
}

4. 响应式布局中的项目顺序 ​

问题：在不同屏幕尺寸下，希望改变项目的顺序。

解决方案：使用不同的grid-template-areas布局：

css
.grid-container {
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-areas: 
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

5. 项目之间的间距不统一 ​

问题：在某些布局中，项目之间的间距看起来不统一。

解决方案：使用gap属性设置统一的间距，而不是使用外边距：

css
.grid-container {
  gap: 20px;
}

Grid 布局的最佳实践 ​

为了更好地使用Grid布局，以下是一些最佳实践：

  1. 从内容出发设计网格：先考虑内容的自然结构和层次，再据此设计网格布局。

  2. 使用命名区域提高可读性：grid-template-areas和命名的网格区域可以显著提高代码的可读性和可维护性。

  3. 灵活使用单位：结合使用fr、百分比、auto和固定单位，以创建灵活且稳定的布局。

  4. 善用minmax()函数：使用minmax()可以创建既有最小限制又能自适应的轨道。

  5. 在合适的地方使用auto-fit/auto-fill：这些关键字非常适合创建响应式的网格，无需媒体查询。

  6. 避免过度复杂的嵌套：过多的嵌套可能导致难以维护的代码。尽量保持网格结构简单。

  7. 考虑可访问性：使用语义化的HTML元素，并确保在不同的屏幕尺寸和设备下内容仍然有意义。

  8. 渐进增强：考虑为不支持Grid的浏览器提供回退方案，或使用@supports在支持Grid的浏览器中应用Grid布局：

css
@supports (display: grid) {
  .container {
    display: grid;
    /* 其他Grid属性 */
  }
}

总结 ​

CSS Grid布局是一个强大的二维布局工具，它彻底改变了我们设计Web页面的方式。通过精确控制行和列，我们可以创建出过去需要复杂hack或大量JavaScript才能实现的布局。

Grid布局的优势在于：

  • 真正的二维布局系统
  • 能够创建复杂而灵活的布局
  • 使用声明式语法，减少HTML标记
  • 强大的响应式布局能力
  • 与Flexbox完美配合

尽管学习曲线可能稍陡，但掌握Grid布局是现代前端开发者的必备技能。它不仅能提高开发效率，还能帮助你实现更加创新和精确的视觉设计。

拓展阅读 ​

  1. MDN Web文档: CSS Grid布局
  2. CSS Tricks上的Grid完全指南
  3. Grid Garden游戏 - 通过游戏学习Grid
  4. CSS Grid的自动布局算法
  5. 使用Grid创建常见布局

用❤️分享前端技术 fedev.wiki

Copyright 何书悦 © 2025-present