grid（一文读懂 css 网格布局）

Sheldon一蓑烟雨任平生2026-04-16 10:49

grid（一文读懂 css 网格布局）

  • [1. 初步认识网格布局](#1. 初步认识网格布局)
  • [2. grid-template-colums 和 rows](#2. grid-template-colums 和 rows)
    • [2.1 长度值](#2.1 长度值)
    • [2.2 分数单位](#2.2 分数单位)
    • [2.3 关键词](#2.3 关键词)
    • [2.4 函数](#2.4 函数)
      • [2.4.1 repeat](#2.4.1 repeat)
      • [2.4.2 minmax：限定最小值和最大值](#2.4.2 minmax：限定最小值和最大值)
      • [2.4.3 fit-content(limit)：只能小，不能大](#2.4.3 fit-content(limit)：只能小，不能大)
      • [2.4.4 组合使用](#2.4.4 组合使用)
    • [2.5 网格线命名](#2.5 网格线命名)
  • [3. grid-template](#3. grid-template)
    • [3.1 grid-template-area（指定网格区域）](#3.1 grid-template-area（指定网格区域）)
    • [3.2 grid-template（行、列、区域3个属性的简写形式）](#3.2 grid-template（行、列、区域3个属性的简写形式）)
      • [3.2.1 只简写行和列](#3.2.1 只简写行和列)
      • [3.2.2 简写行、列和区域](#3.2.2 简写行、列和区域)
  • [4. grid-auto-rows和 grid-auto-columns（定义隐式网格的尺寸）](#4. grid-auto-rows和 grid-auto-columns（定义隐式网格的尺寸）)
  • [5. grid-auto-flow](#5. grid-auto-flow)
    • [5.1 横向还是纵向](#5.1 横向还是纵向)
    • [5.2 grid-column-start](#5.2 grid-column-start)
    • [5.3 dense（配合grid-column-start使用，是否密集排列）](#5.3 dense（配合grid-column-start使用，是否密集排列）)
  • [6. grid](#6. grid)
    • [6.1 `grid: none;` 默认情况](#6.1 grid: none; 默认情况)
    • [6.2 `grid: grid-template` 写法](#6.2 grid: grid-template 写法)
    • [6.3 `<grid-template-rows> / auto-flow \&\& dense? <grid-auto-columns>?` 写法](#6.3 <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? 写法)
    • [6.4 ` auto-flow \&\& dense? <grid-auto-rows>? / <grid-template-columns>` 写法](#6.4 [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> 写法)
  • [7. gap（gap、olumn-gap、row-gap）](#7. gap（gap、olumn-gap、row-gap）)
  • [8. 排列方式](#8. 排列方式)
    • [8.1 justify-items（网格元素在网格内的纵向排列）](#8.1 justify-items（网格元素在网格内的纵向排列）)
    • [8.2 align-items（网格元素在网格内的横向排列）](#8.2 align-items（网格元素在网格内的横向排列）)
    • [8.3 place-items（网格元素在网格内横纵向排列）](#8.3 place-items（网格元素在网格内横纵向排列）)
    • [8.4 justify-content（网格在容器内的纵向排列）](#8.4 justify-content（网格在容器内的纵向排列）)
    • [8.5 align-content（网格在容器内的横向排列）](#8.5 align-content（网格在容器内的横向排列）)
    • [8.6 place-content（网格在容器内的横纵向排列）](#8.6 place-content（网格在容器内的横纵向排列）)
  • [9. 项目区间范围属性](#9. 项目区间范围属性)
    • [9.1 `grid-column-start`、`grid-column-end`、`grid-row-start`、`grid-row-end`](#9.1 grid-column-start、grid-column-end、grid-row-start、grid-row-end)
    • [9.2 使用`grid-row` 和 `grid-column`（简写）](#9.2 使用grid-row 和 grid-column（简写）)
    • [9.3 使用 `grid-area` （简写）](#9.3 使用 grid-area （简写）)
    • [9.4 span 关键字](#9.4 span 关键字)
    • [9.5 网格线命名区分范围](#9.5 网格线命名区分范围)
    • [9.6 练习](#9.6 练习)
  • [10. 网格元素对齐属性（justify-self和align-self）](#10. 网格元素对齐属性（justify-self和align-self）)

1. 初步认识网格布局

区别于 flex 布局，网格布局，顾名思义，就是让我们能够像画网格一样，将容器中的直系子元素当成网格元素，按照行和列的形式进行布局。

网格是一组相交的水平线和垂直线，它定义了网格的列和行。

CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。

index.html：

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid</title>
    <style>
      .grid-box {
        display: inline-grid;
        grid-template-columns: 50px 50px 50px 50px;
        grid-template-rows: 50px 50px 50px 50px;
      }
      .item1 {
        grid-column: 1/3;
        grid-row: 1/3;
        background-color: #fac;
      }
      .item2 {
        background-color: #cfa;
        grid-column: 3/5;
        grid-row: 2/5;
      }
    </style>
  </head>
  <body>
    <div class="grid-box">
      <div class="item1">1</div>
      <div class="item2">2</div>
    </div>
  </body>
</html>

（1）对于最外层.grid-box，我们可以通过设置display: inline-grid;或者display: grid;将其设置为网格容器。其直系子元素也将成为网格元素。

（2）grid-template-columns 和 grid-template-rows 用于分别设置每一列和每一行的高度；这两个属性定义了网格轨道，一个网格轨道就是网格中任意两条线之间的空间。

（3）如果不对网格元素进行任何样式设置，则每个网格元素默认占一个网格的大小（网格单元 ）。比如：

（4）当然，我们也可以对网格元素的占据空间进行设置。

在此之前，我们先了解下网格线 。

列的网格线编号，从左到右依次变大 1~ 5，当然，也可以从右到左 -1 ~ -5；

同理，行的网格线编号，从上到下依次变大 1~ 5，当然，也可以从下到上 -1 ~ -5。

如果我们想规定某个元素占据的行列位置，可以通过指定grid-column和grid-row属性来实现。

比如.item就占据了第3-5列、2-5行网格线的空间。

基于这个原理，我们可以推断

css 复制代码 
grid-column: 3/5;
grid-row: 2/5;

等价于

css 复制代码 
grid-column: 5/3;
grid-row: 5/2;

也等价于

css 复制代码 
grid-column: -1/-3;
grid-row: -1/-4;

2. grid-template-colums 和 rows

grid-template-columns：设置列的宽度，单元格的宽度；
grid-template-rows：设置行的高度，单元格的高度。

默认值为none；

2.1 长度值

  • px（像素）
  • em（相对于当前字体尺寸的单位）
  • rem（相对于根元素字体尺寸的单位）
  • vw/vh（视口宽度/高度的百分比）
  • %（百分比，相对于容器的大小）
html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      .grid-box {
        display: grid;
        /* 列宽 */
        grid-template-columns: 50px 20% 30%;
        /* 行高 */
        grid-template-rows: 20px 10px 50px;
      }
    </style>
  </head>
  <body>
    <div class="grid-box"></div>
  </body>
</html>

2.2 分数单位

  • fr（fraction，分数单位，代表可用空间的一部分）

（1）相加超出1fr时，会自动按照比例分得可用空间

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      .grid-box {
        display: grid;
        /* 列宽 */
        grid-template-columns: 50px 1fr 1fr 1fr;
        /* 行高 */
        grid-template-rows: 20px 10px 50px;
      }
    </style>
  </head>
  <body>
    <div class="grid-box"></div>
  </body>
</html>

（2）相加不超出1fr时，会留下对应比例可用空间

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      .grid-box {
        display: grid;
        /* 列宽 */
        /* grid-template-columns: 50px 1fr 1fr 1fr; */
        grid-template-columns: 50px 0.3fr 0.3fr 0.3fr;
        /* 行高 */
        grid-template-rows: 20px 10px 50px;
      }
    </style>
  </head>
  <body>
    <div class="grid-box"></div>
  </body>
</html>

（3）如果没有指定容器高度，则设置行高单位为fr没有意义（会设置为0），因为不知道可用高度为多少。

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      .grid-box {
        display: grid;
        /* 列宽 */
        grid-template-columns: 50px 1fr 1fr 1fr;
        /* 行高 */
        grid-template-rows: 20px 1fr;
      }
    </style>
  </head>
  <body>
    <div class="grid-box"></div>
  </body>
</html>

2.3 关键词

  • auto：自动计算每行或每列的大小。
  • min-content：设置大小为内容的最小尺寸。
  • max-content：设置大小为内容的最大尺寸。
html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      .grid-box {
        display: grid;
        width: 500px;
        height: 500px;
        grid-template-columns: min-content max-content;
        grid-template-rows: 20px 1fr;
      }
    </style>
  </head>
  <body>
    <div class="grid-box">
      <div class="item">你很帅</div>
      <div class="item">你真的很帅</div>
    </div>
  </body>
</html>

2.4 函数

  • repeat()：允许重复相同大小的行或列多次。
  • minmax()：设置一个大小范围，语法是minmax(min, max)，其中min是最小值，max是最大值。
  • fit-content()：限制网格轨道的尺寸，在给定的最大值和所需的最小值之间。

repeat()：预定义的尺寸或重复模式。

  • auto-fill：自动填充网格线，网格容器会根据列或行的尺寸重复创建尽可能多的轨道，并在容器内填满它们。
  • auto-fit：与auto-fill类似，但任何未被内容占用的轨道将会被收缩并且不会占据空间。

repeat()函数只能作用在grid-template-columns和grid-template -rows这两个CSS属性上。

fit-content(limit)

复制代码 
fit-content(limit) = max(min-content, min(limit, max-content))

2.4.1 repeat

（1）一般用法

比如，repeat(3, 50px 30px) 表示重复3次的 50px 30px

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      .grid-box {
        display: grid;
        width: 500px;
        height: 500px;
        /* grid-template-columns: 50px 30px 50px 30px 50px 30px; */
        /* 等价于 */
        grid-template-columns: repeat(3, 50px 30px);
        grid-template-rows: 20px 50px;
      }
    </style>
  </head>
  <body>
    <div class="grid-box"></div>
  </body>
</html>

（2）auto-fill：自动填充网格线，网格容器会根据列或行的尺寸重复创建尽可能多的轨道，并在容器内填满它们。

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      .grid-box {
        display: grid;
        width: 500px;
        height: 500px;
        grid-template-columns: repeat(auto-fill, 100px);
        grid-template-rows: 50px;
      }
    </style>
  </head>
  <body>
    <div class="grid-box">
      <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>
  </body>
</html>

当我们修改容器宽度时，网格容器会根据列或行的尺寸重复创建尽可能多的轨道，并在容器内填满它们。

（3）auto-fit：与auto-fill类似，但任何未被内容占用的轨道将会被收缩并且不会占据空间。

当我们增大容器宽度时，auto-fit会受限于子元素的个数，最多只能创建5个列的轨道，多出的轨道会和最后一个轨道进行重叠。

2.4.2 minmax：限定最小值和最大值

minmax()：设置一个大小范围，语法是minmax(min, max)，其中min是最小值，max是最大值

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      .grid-box {
        display: grid;
        width: 500px;
        height: 500px;
        grid-template-columns: 100px minmax(100px, 1fr) 100px;
        grid-template-rows: 50px;
      }
    </style>
  </head>
  <body>
    <div class="grid-box">
      <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>
  </body>
</html>

修改容器大小，中间一列最小为100px。

2.4.3 fit-content(limit)：只能小，不能大

fit-content(limit)：限制网格轨道的尺寸，在给定的最大值和所需的最小值之间。

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      .grid-box {
        display: grid;
        width: 500px;
        height: 500px;
        grid-template-columns: 100px fit-content(200px) 100px;
        grid-template-rows: 50px;
      }
    </style>
  </head>
  <body>
    <div class="grid-box">
      <div class="item">1</div>
      <div class="item">你真的很帅</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </body>
</html>

即使我们给了200px，但是实际只要80px，则只会占据80px。

如果改成20px，则最多只能有20x宽。

2.4.4 组合使用

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      .grid-box {
        display: grid;
        width: 500px;
        height: 500px;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        grid-template-rows: 50px;
        gap: 10px;
      }
      .item {
        background-color: #fca;
      }
    </style>
  </head>
  <body>
    <div class="grid-box">
      <div class="item">1</div>
      <div class="item">你真的很帅</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </body>
</html>

修改容器宽度，子元素自适应大小

2.5 网格线命名

css 复制代码 
grid-template-columns: [line-start] 50px [line-2] 100px [line-3] 80px [line-end];

3. grid-template

3.1 grid-template-area（指定网格区域）

CSS Grid 布局中用于指定网格区域的属性。它允许你通过一个字符字符串来定义网格容器的布局，每个字符代表一个单元格，从而创建具有特定区域的网格结构。

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      .grid {
        display: grid;
        height: 100vh;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr 5fr 1fr;
        grid-template-areas:
          "头部 头部 头部 头部"
          "侧边栏 content content content"
          ". footer footer .";
      }
      .header {
        grid-area: 头部;
        background-color: aqua;
      }
      .sidebar {
        grid-area: 侧边栏;
        background-color: yellow;
      }
      .content {
        grid-area: content;
        background-color: chartreuse;
      }
      .footer {
        grid-area: footer;
        background-color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="header"></div>
      <div class="sidebar"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>
css 复制代码 
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 5fr 1fr;
grid-template-areas:
  "头部 头部 头部 头部"
  "侧边栏 content content content"
  ". footer footer .";

将网格容器分为3行4列，并且使用grid-template-areas给每个网格单元进行命名。

css 复制代码 
.header {
  grid-area: 头部;
}

表示.header网格子元素占据名为头部的网格单元。

注意：如果grid-template-areas相同命名的网格单元不能合并成一条网格轨道的话，则为无效。比如：

css 复制代码 
grid-template-areas:
	"头部 头部 头部 头部"
	"侧边栏 content content content"
	"content footer footer .";

但是，无论横向还是纵向，只要所有相同命名的网格单元都能够各自合成一条网格轨道，则有效。比如：

css 复制代码 
grid-template-areas:
	"头部 头部 头部 头部"
	"侧边栏 content content content"
	"侧边栏 footer footer .";

3.2 grid-template（行、列、区域3个属性的简写形式）

grid-template 是 grid-template-rows、grid-template-columns、grid-template-areas 3个属性的简写形式。

3.2.1 只简写行和列

css 复制代码 
grid-template: 1fr 5fr 1fr / repeat(4, 1fr);

等价于

css 复制代码 
grid-template-rows: 1fr 5fr 1fr;
grid-template-columns: repeat(4, 1fr);

3.2.2 简写行、列和区域

css 复制代码 
grid-template:
	"头部 头部 头部 头部" 1fr
	 "侧边栏 content content content" 5fr
	 ". footer footer ." 1fr
	 / 1fr 1fr 1fr 1fr;

等价于

css 复制代码 
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 5fr 1fr;
   grid-template-areas:
     "头部 头部 头部 头部"
     "侧边栏 content content content"
     ". footer footer .";

注意，使用 grid-template 时，repeat() 函数是禁用的。

4. grid-auto-rows和 grid-auto-columns（定义隐式网格的尺寸）

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .grid {
        display: grid;
        grid-template: 1fr 1fr / 1fr 1fr;
        /* 设置隐式网格的行高 */
        grid-auto-rows: 50px;
        /* 无效，受限于已有网格的列宽 */
        grid-auto-columns: 10px;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

grid-template: 1fr 1fr / 1fr 1fr; 设置了网格容器为2行2列，但是我们实际有5个网格元素时。

前4个（我们定义的网格）被称为显式网格 ；

第5个超出我们定义的网格的区域被称为隐式网格。

grid-auto-columns 和 grid-auto-rows 属性的作用是指定任何自动生成的网格（也称为隐式网格）的尺寸大小。

因为显示网格的列宽已经存在，所以会导致 grid-auto-columns 无效，所以实际上只有 grid-auto-rows 生效。

5. grid-auto-flow

用于指定在自动生成的网格项目放置到网格容器中时的放置顺序。

5.1 横向还是纵向

默认值： row: 表示没有指定位置的网格在水平（行）方向上自然排列；

（1）默认情况，横向排列 grid-auto-flow: row;

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid-auto-flow</title>
    <style>
      .grid {
        display: grid;
        grid-template: 50px 50px / repeat(4, 50px);
      }
      .grid > div {
        line-height: 50px;
        text-align: center;
        color: #fff;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="item">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

（2）设置为 column（纵向排列）

css 复制代码 
.grid {
  display: grid;
  grid-template: 50px 50px / repeat(4, 50px);
  grid-auto-flow: column;
}

5.2 grid-column-start

grid-column-start：指定某个网格元素在哪一列开始排列

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid-auto-flow</title>
    <style>
      .grid {
        display: grid;
        grid-template: 50px 50px / repeat(4, 50px);
        grid-auto-flow: row;
      }
      .grid > div {
        line-height: 50px;
        text-align: center;
        color: #fff;
        background-color: skyblue;
      }
      .item {
        grid-column-start: 3;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="item">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

5.3 dense（配合grid-column-start使用，是否密集排列）

dense: 自然排列启用"密集"打包算法，也就是说，如果稍后出现的网格比较小，则尝试看看其前面有没有合适的地方放置该网格，使网格尽可能排列紧凑.

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid-auto-flow</title>
    <style>
      .grid {
        display: grid;
        grid-template: 50px 50px / repeat(4, 50px);
        grid-auto-flow: row dense;
      }
      .grid > div {
        line-height: 50px;
        text-align: center;
        color: #fff;
        background-color: skyblue;
      }
      .item {
        grid-column-start: 3;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="item">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>


grid-auto-flow: row dense; 的 dense 会让后续网格元素先尝试放在前面空缺的位置。

6. grid

gird 是之前这6个CSS属性的缩写集合。

css 复制代码 
/* grid-template-columns: ; */
/* grid-template-rows: ; */
/* grid-template-areas: ; */
/* grid-auto-columns: ; */
/* grid-auto-rows: ; */
/* grid-auto-flow: ; */

整体可分为4类：

css 复制代码 
grid: none;

grid: grid-template;

grid: <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?

grid: [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>

基本上用 grid: grid-template; 写法即可。

熟练使用grid缩写属性，是掌握网格布局的重要标志之一。

6.1 grid: none; 默认情况

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid-auto-flow</title>
    <style>
      .grid {
        display: grid;
        grid: none;
      }
      .grid > div {
        line-height: 50px;
        text-align: center;
        color: #fff;
        background-color: skyblue;
      }
      .item {
        grid-column-start: 3;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="item">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

6.2 grid: grid-template 写法

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid-auto-flow</title>
    <style>
      .grid {
        display: grid;
        grid:
          "a a a a" 1fr
          "b b c c" 3fr
          / 1fr 2fr 1fr 2fr;
      }
      .grid > div {
        line-height: 50px;
        text-align: center;
        color: #fff;
        background-color: skyblue;
      }
      .item {
        grid-column-start: 3;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="item">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

6.3 <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? 写法

网格行高 / 纵向排列、是否密集排列，以及隐式网格的列宽

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid-auto-flow</title>
    <style>
      .grid {
        display: grid;
        grid: 50px 50px / auto-flow 50px;
      }
      .grid > div {
        line-height: 50px;
        text-align: center;
        color: #fff;
        background-color: skyblue;
      }
      .item {
        grid-column-start: 3;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="item">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

6.4 [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> 写法

横向排列、是否密集排列，以及隐式网格的行高 / 网格列宽

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid-auto-flow</title>
    <style>
      .grid {
        display: grid;
        grid: auto-flow 50px 50px / 50px;
      }
      .grid > div {
        line-height: 50px;
        text-align: center;
        color: #fff;
        background-color: skyblue;
      }
      .item {
        grid-column-start: 3;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="item">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

7. gap（gap、olumn-gap、row-gap）

  • gap: 用来设置网格行与列之间的间隙

  • column-gap: 用来设置行元素之间的间隙

  • row-gap: 用来设置列元素之间的间隙



8. 排列方式

8.1 justify-items（网格元素在网格内的纵向排列）

属性值 描述 图示
start 左对齐。
end 右对齐
center 居中对齐
stretch 拉伸，占满单元格的整个宽度（不过需要子元素不设置宽高才行）。

8.2 align-items（网格元素在网格内的横向排列）

属性值 描述 图示
start 上对齐。
end 下对齐
center 居中对齐
stretch 拉伸，占满单元格的整个宽度（不过需要子元素不设置宽高才行）。
baseline 按照文字基线对齐 有文字按照文字对齐，没有的话按照元素底部对齐
  • normal是默认值，会根据使用场景的不同表现为stretch或者start。
  • 如果grid子项是具有内在尺寸或具有内在比例的元素，则此时normal的表现类似于start属性值的表现

8.3 place-items（网格元素在网格内横纵向排列）

place-items：align-items justify-items

比如：

css 复制代码 
place-items: center end;

等价于

css 复制代码 
align-items: center;
justify-items: end;

8.4 justify-content（网格在容器内的纵向排列）

属性值 图示 属性值 图示
start space-around
end space-between
center space-evenly

8.5 align-content（网格在容器内的横向排列）

属性值 图示 属性值 图示
start space-around
end space-between
center space-evenly

8.6 place-content（网格在容器内的横纵向排列）

place-content: align-content justify-content

css 复制代码 
place-content: center end;

等价于

css 复制代码 
align-content: center;
justify-content: end;

9. 项目区间范围属性

9.1 grid-column-start、grid-column-end、grid-row-start、grid-row-end

grid-column-start、grid-column-end、grid-row-start、grid-row-end 4个属性可用于合围成一块区域，表示网格容器中某个网格元素的范围。比如：

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .grid {
        display: grid;
        grid: 100px 100px 100px / 100px 100px 100px;
      }
      .item {
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 4;
        background-color: #f0f;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="item"></div>
    </div>
  </body>
</html>

9.2 使用grid-row 和 grid-column（简写）

grid-row : start / end

grid-column: start / end

css 复制代码 
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;

等价于

css 复制代码 
grid-column: 2/4;
grid-row: 2/4;

9.3 使用 grid-area （简写）

grid-area: r-start / c-start / r-end / c-end

其实就是区域左上角的纵横坐标 + 右下角的纵横坐标

css 复制代码 
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;

等价于

css 复制代码 
grid-area: 2 / 2 / 4 / 4;

9.4 span 关键字

合并单元格 指定项目在网格中横向或纵向跨越的轨道数量。

css 复制代码 
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;

等价于

css 复制代码 
grid-column-start: 2;
grid-column-end: span 2;
grid-row-start: 2;
grid-row-end: span 2;

span 2 表示往后跨越两格。最小跨越轨道默认为1，小于1时无效，当做1处理。

9.5 网格线命名区分范围

在 3.1 grid-template-area（指定网格区域） 中，我们使用 grid-template-area 给网格容器每个网格单元进行区域命名，再给网格元素使用grid-area占据对应命名区域。

同样，我们还可以在网格容器给网格线进行命名，然后给网格元素使用对应的网格线即可圈定范围。比如：

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .grid {
        display: grid;
        grid:
          [A-start] 100px [A-end B-start] 100px [B-end C-start] 100px [C-end]
          / [A-start] 100px [A-end B-start] 100px [B-end C-start] 100px [C-end];
      }
      .item {
        grid-column-start: A;
        grid-column-end: B;
        grid-row-start: 2;
        grid-row-end: 4;
        background-color: #f0f;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="item"></div>
    </div>
  </body>
</html>
css 复制代码 
grid:
	[A-start] 100px [A-end B-start] 100px [B-end C-start] 100px [C-end]
	/ [A-start] 100px [A-end B-start] 100px [B-end C-start] 100px [C-end];

[网格线名称]

属性值第一行表示从左到右的网格线名称。比如 [A-end B-start] 表示从左到右第二个网格线命名为A-end 和 B-start，语义上表示为A的结尾和B的开头。

属性值第二行表示从上到下的网格线名称。可以直接复制上一行，这样比较方便，当然你也可以写成别的名称。不过通常不这么做。

css 复制代码 
grid-column-start: A;
grid-column-end: B;

表示网格元素从左到右使用[A-start, B-end] 的区间范围。

9.6 练习

模拟B站首页，写一个grid的布局

html 复制代码 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      .grid {
        display: grid;
        width: 1226px;
        height: 500px;
        margin: 10x auto;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
      }
      .lbt {
        grid-column: 1/3;
        grid-row: 1/3;
        background-color: yellow;
      }
      .item {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="lbt"></div>
      <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 class="item">视频卡片7</div>
      <div class="item">视频卡片8</div>
      <div class="item">视频卡片9</div>
      <div class="item">视频卡片10</div>
      <div class="item">视频卡片11</div>
    </div>
  </body>
</html>

10. 网格元素对齐属性（justify-self和align-self）

css 复制代码 
.item {
  justify-self: auto | normal | stretch | start | end | center | baseline;
  align-self: auto | normal | stretch | start | end | center | baseline;
}

除了auto属性值，其他各个属性值的含义与justify-items和align-items属性中属性值的含义是一样的.

  • auto是默认值，表示使用grid容器上设置的justify-items或align-items属性值。
  • normal通常表现为stretch拉伸，如果是具有内在尺寸和原始比例的元素，则表现为start。
  • stretch指grid子项拉伸。
  • start指grid子项起始位置对齐。
  • end指grid子项结束位置对齐。
  • center指grid子项居中对齐。
  • baseline指grid子项第一行文本基线对齐。
相关推荐
Pedantic2 小时前
SwiftUI 手势层级（Gesture Hierarchy）详解
前端
飘尘2 小时前
前端转型全栈（Java后端）的快速上手指引
前端·后端·全栈
一颗烂土豆2 小时前
Meshopt 压缩深度解析，为什么它比 Draco 更快
前端·javascript·webgl
浏览器工程师3 小时前
AI Agent 接浏览器任务，先别让它一路点到底
前端·后端
雨季mo浅忆3 小时前
VSCode自动格式化三要素
前端
爱勇宝4 小时前
深扒 Anthropic 1680 位工程师简历：应届生几乎没机会，AI 公司最缺的不是博士
前端·后端·程序员
kyriewen4 小时前
同事每天催我 Code Review，我写了个脚本让 AI 替我 review PR——现在他反过来催 AI 了
前端·javascript·ai编程
user20585561518137 小时前
Windows 项目安装时报 `node-sass` 错误，如何快速处理
前端
LiaCode7 小时前
Redis 在生产项目的使用
前端·后端
热门推荐
012026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？022026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04【AI】2026 年具身智能模型和世界模型总结05GitHub 镜像站点06AI科技热点日报 | 2026年6月1日072026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？08AI一周事件 · 2026-06-03 至 2026-06-0909Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析10上线仅72小时被强制下架：Claude Fable 5 的短命