CSS Grid Cheat Sheet Illustrated in 2021🎖️ Table of Contents : First, What is Grid? Grid Architecture Grid Chart -- How to Set Up the Project Grid Parent Properties grid-template-columns grid-template-rows grid-template-areas column-gap : row-gap : justify-items : align-items : justify-content : align-content : Take a Break Grid Children Properties The Grid Scale grid-column : start/end grid-row : start/end grid-area : Justify-self : align-self : Short Hands place-content : place-items : place-self : grid-template : gap/grid-gap : Conclusion

2025-06-04

2021 年 CSS 网格速查表

目录 ：

首先，什么是Grid？

网格架构

网格图 --

如何设置项目

网格父级属性

网格模板列

网格模板行

网格模板区域

列间隙：

行距：

对齐项目：

对齐项目：

对齐内容：

对齐内容：

休息一下

网格子项属性

网格尺度

网格列：开始/结束

网格行：开始/结束

网格区域：

自我证明：

对齐自身：

短手

地点内容：

地点项目：

地点自我：

网格模板：

间隙/网格间隙：

结论

今天我们将学习CSS 网格属性，以便你能够创建自己的响应式网站。我会讲解网格的每个属性是如何运作的，并附上一份涵盖所有网格功能的速查表。开始吧🎖️

目录 ：

如果您愿意，也可以在 YouTube 上观看此教程：

首先，什么是Grid？

替代文本

网格是制作网站的蓝图。

网格模型使我们能够布局网站的内容。不仅如此，它还能帮助我们创建针对多种设备的响应式网站所需的结构。

这是我使用 Grid 作为主要蓝图创建的简单演示。

桌面视图

替代文本

移动视图

替代文本

网格架构

那么网格架构是如何工作的呢？网格项（内容）沿着主轴和横轴分布。我们利用网格的各种属性来操作这些项，从而创建网站布局。

网格架构

顺便说一句，我们可以像 Excel 软件一样连接多行和多列，这比 Flexbox 为我们提供了更多的灵活性和选择。

这是我为Flexbox制作的 CheatSheet

网格图 --

替代文本

此图表包含使用网格时可以使用的所有属性。网格属性分为 -

  • 父属性
  • 儿童属性

注意：红色文本是简写属性

替代文本

替代文本

在本教程结束时，您将清楚地了解如何使用所有这些属性

如何设置项目

替代文本

对于这个项目，你需要了解一些 HTML、CSS 知识以及如何使用 VS Code。跟随我完成以下任务：

  1. 创建名为“Project-1”的文件夹并打开 VS Code
  2. 创建 index.html 和 style.css 文件
  3. 安装 Live Server 并运行它。

或者，您可以直接打开Codepen并开始编码。

在本教程结束时，您将能够制作出准确而美观的网站布局。

好了……一切就绪！开始写代码吧。😊

替代文本

HTML

在 body 标签内创建 3 个框。像这样 👇

<div class="container">
  <div class="box-1"> A </div>
  <div class="box-2"> B </div>
  <div class="box-3"> C </div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

步骤1

让我们清除默认浏览器样式。关注我👇

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

步骤2

在主体选择器中，进行以下调整

body {
  font-family: sans-serif;
  font-size: 40px;
  width: 100%;
  min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

步骤3

现在，让我们通过选择所有框来设置它们的样式 ->

[class^="box-"] {
  background-color: skyblue;

/* To place the letter at the center */
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

注意：别担心，我们将详细讨论这些网格属性。

步骤4

现在，像这样在我们的盒子之间留出一些空隙👇

.container {
  display: grid;
  gap: 20px;
}
Enter fullscreen mode Exit fullscreen mode

但是等等...

替代文本

在开始之前，您需要了解父类和子类之间的关系。

替代文本

对于网格父级属性，我们将在 .container 类中写入。对于网格子级属性，我们将在 .box-* 类中写入。

网格父级属性

替代文本

首先，让我们了解一下网格父级属性！

网格模板列

这用于定义列的数量和宽度。您可以单独设置每列的宽度，也可以使用“repeat()”函数为所有列设置统一的宽度。

替代文本

替代文本

要重新创建这些结果，请在 CSS 上写下这些行 ->

.container {
  display: grid;
  gap: 20px;

/*  Change the values     👇 to experiment */
  grid-template-columns: 200px auto 100px;
}
Enter fullscreen mode Exit fullscreen mode

笔记 ：

  • 像素值将是精确测量的。“auto”关键字将覆盖可用空间。
  • 如果使用 fr（分数单位）测量，所有框的大小将相等

网格模板行

这用于定义行数和行高。您可以单独设置每行的高度，也可以使用“repeat()”函数为所有行设置统一的高度。

替代文本

替代文本

为了测试这些结果，在 CSS 上写下这些行 ->

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

/* Change the values  👇 to experiment */
  grid-template-rows: 200px auto 100px;
}
Enter fullscreen mode Exit fullscreen mode

网格模板区域

这用于指定网格单元格在父容器中应占用的列和行空间量。有了它，生活变得轻松多了，因为它让我们能够直观地看到我们正在做的事情。

替代文本

称之为我们的布局的蓝图（模板）👇

替代文本

要进行此实验，您需要了解父级和子级属性 -

  • grid-template-areas ：将创建蓝图的父属性
  • grid-area ：将遵循蓝图的子属性。

首先，创建蓝图

就像这样👇在父级 .container 类中

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-areas: 
    "A A A A   A A A A   A A A A"
    "B B B B   B B B B   B B C C"
    "B B B B   B B B B   B B C C";
}
Enter fullscreen mode Exit fullscreen mode

实施蓝图

定位我们所有的子 .box-* 类并设置如下值 ->

.box-1{
  grid-area: A;
}
.box-2{
  grid-area: B;
}
.box-3{
  grid-area: C;
}
Enter fullscreen mode Exit fullscreen mode

注意：网格区域属性将在网格子属性部分再次讨论

列间隙：

此属性用于在网格内的列之间放置间隙👇

替代文本

要测试这一点，请写入👇

.container {
  display: grid;
  height: 100vh;

  grid-template-columns: 100px 100px 100px;
//Change values👇 to experiment
  column-gap:  50px;
}
Enter fullscreen mode Exit fullscreen mode

注意： column-gap 与 grid-template-columns 配合使用

行距：

此属性用于在网格内放置行之间的间隙👇

替代文本

让我们测试一下👇

.container {
  display: grid;
  height: 100vh;

  grid-template-rows: 100px 100px 100px;
// Change   👇  values to experiment
  row-gap:  50px;
}
Enter fullscreen mode Exit fullscreen mode

注意： row-gap 与 grid-template-rows 配合使用

对齐项目：

用于沿X 轴 [主轴]定位网格容器内的网格项 (子项) 。这4 个值分别是 👇

替代文本

替代文本

如果你想测试这一点，那么在 HTML 中添加 1 个框 ->

<div class="container">

  <!--Other boxes - A, B, C are here-->

  <div class="box-4"> D </div>
</div>
Enter fullscreen mode Exit fullscreen mode

在 css 中 ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change values 👇  to experiment
  justify-items : end;
}
Enter fullscreen mode Exit fullscreen mode

对齐项目：

用于沿Y 轴（交叉轴）定位网格容器内的网格项（子项） 。这4 个值分别是：👇

替代文本

不要改变 HTML 上的任何内容，在 css 中编写 ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change values 👇  to experiment
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

对齐内容：

这用于将我们的网格（基本上所有内容）沿X 轴（主轴）定位在网格容器内。这7 个值分别是👇

替代文本

替代文本

不要改变 HTML 上的任何内容，在 css 中编写 ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change  values  👇  to experiment
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

对齐内容：

这用于将我们的网格（基本上所有内容）沿Y 轴（交叉轴）定位到网格容器内。这7 个值分别是👇

替代文本

替代文本

不要改变 HTML 上的任何内容，在 css 中编写 ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change  values 👇  to experiment
  align-content : center;
}
Enter fullscreen mode Exit fullscreen mode

休息一下

到目前为止一切都好！休息一下吧，你值得拥有！

替代文本

网格子项属性

替代文本

现在，让我们看看网格子项的属性

网格尺度

我制作了这个网格比例尺来演示如何计算行和列的连接方式。我们可以使用以下两种测量方式中的任意一种：

  • 数字[1,2,3,4，等等...]
  • span 关键字

替代文本

当我们在短时间内编写代码时，您将对本指南☝️有一个清晰的了解

下图👇显示了单个单元格的行和列的起点和终点。

替代文本

HTML

为了试验网格比例并了解以下属性，请在 body 标签内制作 4 个框 -

<div class="container">
  <div class="box-1"> A </div>
  <div class="box-2"> B </div>
  <div class="box-3"> C </div>
  <div class="box-4"> D </div>
</div>
Enter fullscreen mode Exit fullscreen mode

我们将使用 repeat() 函数。它的作用是将我们的代码重复执行到一定时间。这里有一个例子 👇

grid-template-columns : repeat(5,1fr);
Enter fullscreen mode Exit fullscreen mode

这☝️相当于写这个👇

grid-template-columns : 1fr 1fr 1fr 1fr 1fr ;
Enter fullscreen mode Exit fullscreen mode

快速说明：

替代文本

当我们使用 fr [ 分数 ] 单位时，我们将屏幕区域划分为相等的比例。

  grid-template-columns: repeat(5, 1fr);
Enter fullscreen mode Exit fullscreen mode

这段☝️代码将屏幕宽度分成 5 个相等的部分。

一切就绪，开始吧！

网格列：开始/结束

这两个属性用于将多个列连接在一起。它是以下两个属性的简写：

  • 网格列起始
  • 网格列结束

在 CSS 上写下这些

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}
Enter fullscreen mode Exit fullscreen mode

结果 -

替代文本

在这里，我们将屏幕（宽度和高度）分成 12 个相等的部分。1 个框占据 1 个部分，或者您可以称之为 1fr [ 1 个分数 ]。沿宽度方向的其余 8 个分数为空。

当我们处理子属性时，我们需要像这样定位我们的 .box-* 类 -

.box-1{}
.box-2{}
.box-3{}
.box-4{}
Enter fullscreen mode Exit fullscreen mode

你可以尝试其中任何一个或全部的盒子，我会坚持使用 .box-1

让我们把网格规模化。我们正在处理列，只关注列，而不是行。

替代文本

每个 .box-* 类的默认比例是

grid-column-start : 1;
grid-column-end : 2;

/* The shorthand -> */
 grid-column : 1 / 2
Enter fullscreen mode Exit fullscreen mode

我们也可以在 span 单元中写入这个☝️，像这样👇

grid-column : span 1;
Enter fullscreen mode Exit fullscreen mode

让我们将空的 8 个分数分配给 .box-1，像这样👇

.box-1{
grid-column : 1/10
}
Enter fullscreen mode Exit fullscreen mode

结果👇

替代文本

简要说明：

替代文本

我是怎么计算的？盒子 1 本身就占了一个盒子。除此之外，我们还要添加 8 个盒子。最后，必须加 1 来表示结束，所以 8+1+1 = 10

使用 Span 关键字

如果您对第一个感到困惑，您可以使用这个，因为它很容易理解。

我们需要在 .box-1 中增加 8 个盒子，而 .box-1 已经占用了 1 个盒子。因此，我们需要计算 8+1 = 9

.box-1{
  grid-column : span 9;
}
Enter fullscreen mode Exit fullscreen mode

这将输出相同的结果

网格行：开始/结束

这两个属性用于将多行连接在一起。它们是以下两个属性的简写：

  • 网格行起始
  • 网格行尾

让我们来尝试一下！这里我还是使用 .box-1
来作为我们的网格参考线。现在，只关注行比例，而不是列比例。

替代文本

让我们将 9 个盒子沿着行连接到 .box-1

写下这些👇

.box-1{
  grid-row : 1/11;
}
Enter fullscreen mode Exit fullscreen mode

计算 -> .box-1 容纳 1 个盒子，再添加 9 个盒子，最后添加强制性的 1 以表示结束 9+1+1=11

替代方案👇使用 span 关键字

.box-1{
  grid-row : span 10;
}
Enter fullscreen mode Exit fullscreen mode

计算 -> .box-1 容纳 1 个盒子，再添加 9 个盒子
9+1=10

目前的结果

替代文本

网格区域：

首先，我们需要设置grid-template-areas ☝️ 完成后，我们必须在子类中指定父类中使用的名称，如下所示👇

替代文本

在父容器内指定 grid-template-areas

替代文本

就像这样👇在父类中

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-areas: 
    "A A A A   A A A A   A A A A"
    "B B B B   B B B B   B B C C"
    "B B B B   B B B B   B B C C";
}
Enter fullscreen mode Exit fullscreen mode

使用 grid-areas 指定子类中父容器中使用的名称👇

替代文本

就像儿童班里这样👇

.box-1{
  grid-area: A;
}
.box-2{
  grid-area: B;
}
.box-3{
  grid-area: C;
}
Enter fullscreen mode Exit fullscreen mode

自我证明：

用于将1 个单独的网格项（子项）沿X 轴 [主轴]定位到网格容器内。这4 个值分别是 👇

替代文本

写下这些来尝试一下这些值👇

.container {
  display: grid;
  gap :25px;
  height: 100vh;

/* // each box has equal size */
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}
Enter fullscreen mode Exit fullscreen mode

记住！这只对子类有效。所以，你可以定位任意 .box-* 类。我这里定位的是第一个盒子。

.box-1 {
/*  Change values 👇  to experiment */
  justify-self : start;  
}
Enter fullscreen mode Exit fullscreen mode

对齐自身：

用于在网格容器内沿Y 轴（交叉轴）定位1 个单独的网格项（子项）。这4 个值分别是👇

替代文本

让我们尝试一下这些值👇

.container {
  display: grid;
  gap :25px;
  height: 100vh;

/* // each box has equal size */
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}
Enter fullscreen mode Exit fullscreen mode

记住！这只对子类有效。所以，你可以定位任意 .box-* 类。我这里定位的是第一个盒子。

.box-1 {
/*  Change values 👇  to experiment */
  align-self : start;  
}
Enter fullscreen mode Exit fullscreen mode

短手

替代文本

让我们看看这些网格简写属性 -

  • 地点内容
  • 地点物品
  • 地方自我
  • 网格模板
  • 间隙/网格间隙

地点内容：

替代文本

这是两个属性的简写 -

  • 对齐内容
  • 内容对齐

一个例子

align-content : center;
justify-content : end;

/* The shorthand */
place-content : center / end ;
Enter fullscreen mode Exit fullscreen mode

地点项目：

替代文本

这是两个属性的简写 -

  • 对齐项目
  • 对齐项目

一个例子

align-items : end;
justify-items : center;

/* The shorthand */
place-items : end / center ;
Enter fullscreen mode Exit fullscreen mode

地点自我：

替代文本

这是两个属性的简写 -

  • 对齐自身
  • 自我辩护

一个例子

align-self : start ;
justify-self : end ;

/* The shorthand */
place-self : start / end ;
Enter fullscreen mode Exit fullscreen mode

网格模板：

替代文本

这是两个属性的简写 -

  • 网格模板行
  • 网格模板列

一个例子

grid-template-rows : 100px 100px;
grid-template-columns : 200px 200px;

/* The shorthand */
grid-template : 100px 100px / 200px 200px;
Enter fullscreen mode Exit fullscreen mode

间隙/网格间隙：

gap 和 grid-gap 是同一个东西，作用也一样。你可以使用其中任何一个。

替代文本

这是两个属性的简写 -

  • 行距
  • 柱间隙

一个例子

row-gap : 20px ; 
column-gap : 30px ;

/* The shorthand */
gap : 20px  30px;
Enter fullscreen mode Exit fullscreen mode

致谢

致谢

阅读下文：

乔伊沙希卜

掌握 CSS Flexbox 2021 🔥- 构建 5 种响应式布局🎖️|| CSS 2021

Joy Shaheb ・ 2021年2月4日

#css #tutorial #beginners #webdev
乔伊沙希卜

2021 年通过 5 个练习掌握 CSS 网格模型 || CSS 2021 🔥

Joy Shaheb ・ 2020年12月22日

#教程 #beginners #webdev #css

结论

这是您阅读到最后的奖牌❤️

非常感谢您的建议和批评❤️

替代文本

文章来源：https://dev.to/joyshaheb/css-grid-cheat-sheet-illusterated-in-2021-1a3
Devto 翻译
PREV
你应该知道的 14 个很棒的 JavaScript 数组技巧 1. 如何使用数组解构 2. 如何创建无重复版本的数组 3. 如何查找符合条件的所有元素 4. 如何从数组中删除所有假值 5. 如何查找符合条件的第一个元素 6. 如何检查是否有任何/每个元素符合条件 7. 如何查找两个数组的交集 8. 如何查找两个数组的差集 9. 如何查找两个数组的并集 10. 如何检索第一个和最后一个元素 11. 如何在数组的前面添加/追加元素 12. 如何复制数组 13. 如何从数组中查找最小值和最大值 14. 如何对数字数组进行排序 结论
NEXT
改变我软件工程师生涯的五本书 子弹日记方法 原子习惯 如何赢得朋友和影响他人 成为经理人 数字极简主义