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子项第一行文本基线对齐。
相关推荐
砍材农夫2 小时前
Hermes 搭建可视化web-dashboard界面
前端·人工智能
Z_Wonderful2 小时前
Qiankun 子应用数据互通 + 资源共享 完整方案（React+Vue）
前端·vue.js·react.js
你的牧游哥2 小时前
Electron核心api详解
前端·javascript·electron
渣渣xiong2 小时前
从零开始:前端转型AI agent直到就业第十二天-第十三天
前端·人工智能
05Nuyoah2 小时前
CSS 基础认知和基础选择器
前端·javascript·css·node.js
DanCheOo2 小时前
从单 Chat 到多 Agent 系统：AI 应用的架构演进路线
前端·agent
开开心心就好2 小时前
经典塔防游戏移植移动端随时畅玩
java·前端·科技·游戏·edge·django·pdf
We་ct2 小时前
前端包管理工具与Monorepo全面解析
前端·javascript·npm·pnpm·yarn·monorepo·包管理
六月的可乐2 小时前
AI Agent 架构设计与实践：React、Plan-Exec、Reflect 与混合模式(附开源代码)
前端·javascript·aigc
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点03一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛04GPT-6核心能力解析及与现有主流大模型对比05基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南06GPT-6发布日深度解析-Symphony架构200万Token实战07零成本！Ollama本地部署国产大模型全指南（支持Kimi-K2.5/GLM-5/Qwen，新手秒上手）08AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析09从限购到畅通：GLM-5.1 Coding Plan接入攻略10CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南