我如何记住 CSS 网格属性

2025-06-10

我如何记住 CSS 网格属性

CSS Grid 的语法比较陌生，而且很难记住。但是，如果你记不住 CSS Grid 的语法，那么在使用 CSS Grid 时你就会缺乏自信。

要有效地运用 CSS Grid，您需要记住它的属性和值。

我想分享一下我今天是如何记住 CSS Grid 中最常见的属性的。这将帮助你轻松使用 CSS Grid，而无需像疯子一样在 Google 上搜索。

属性组

我根据四组属性来记忆 CSS Grid：

  1. 显式网格
  2. 差距
  3. 对齐事物
  4. 隐式网格

显式网格

假设你想创建一个 4 列 3 行的网格。你大声说出“4 列 3 行”。这样就明确了。

如果您声明了网格中的行数和列数，则网格是明确的。

您可以使用两个属性来创建明确的网格：

  1. grid-template-columns
  2. grid-template-rows

grid-template-columns让您定义列数。grid-template-rows让您定义行数。

.grid {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-template-rows: 3em 3em 3em;
}
Enter fullscreen mode Exit fullscreen mode

这将创建一个具有四列和三行的网格。

在CodePen上查看Zell Liew ( @zellwk )编写的Pen XPyGZp。

你怎么知道有四列和三行？

grid-template-columns为每个添加的长度值创建一个新列。grid-template-columns上面的声明中，我们有四个1fr值。这意味着有四列。

grid-template-rows工作原理相同。上面的网格有三个3em值，这意味着它有 3 行。

grid-template-columns并且grid-template-rows还可以接受诸如repeat、autofill、autofit、 之类的值minmax。本文不会详细讨论这些值。

现在您需要知道的是，您可以创建具有两个属性的显式网格：

  1. grid-template-columns：创建列
  2. grid-template-rows：创建行

在网格中定位项目

您可以使用两个属性来控制网格中项目的位置：

  1. grid-column
  2. grid-row

这两个属性只能在网格项上使用。

grid-column让你选择要放置网格项的列。它是grid-column-start和 的简写grid-column-end。

它的工作方式如下：grid-column-start / grid-columns-end。

/* Using the longhand */
.grid-item {
  grid-column-start: 1; 
  grid-column-end: 3;
}

/* Using the shorthand */
.grid-item {
  grid-column: 1 / 3;
}
Enter fullscreen mode Exit fullscreen mode

注意：您还可以使用span关键字来告诉 CSS Grid 您希望您的项目占用多少列。

/* Using the longhand */
.grid-item {
  grid-column-start: 1; /* Start at column one */
  grid-column-end: span 2; /* Width is two columns */
}
Enter fullscreen mode Exit fullscreen mode

请参阅Zell Liew ( @zellwk ) 在CodePen上的Pen Explicit Grid 属性。

grid-row让你选择要放置网格项的行。它是grid-row-start和 的简写grid-row-end。

它的工作方式如下：grid-row-start / grid-row-end。

/* Using the longhand */
.grid-item {
  grid-row-start: 1; 
  grid-row-end: span 2;
}

/* Using the shorthand */
.grid-item {
  grid-row: 1 / span 2;
}
Enter fullscreen mode Exit fullscreen mode

请参阅Zell Liew ( @zellwk ) 在CodePen上撰写的Pen Positioning items (rows)。

将项目定位到命名区域中

如果您不喜欢计算行数和列数，可以给网格的各个部分命名。这些命名的部分称为网格区域。要创建网格区域，请grid-template-area在网格上使用。

关于创建网格区域的一些注意事项：

  1. 必须命名每个网格区域
  2. 如果您不想命名区域，请使用.
  3. 每组用引号 ( "row1" "row2") 分隔，表示一行
  4. 引号 ( "area1 area2") 内的每个值表示一个区域

下面的示例有三个网格区域：

  1. header前两列占 4 列
  2. main位于第二行，占据中间两列
  3. footer位于第三行，占 4 列
.grid {
  grid-template-areas: "header header header header"
                      ".      main   main   .     "
                      "footer footer footer footer";
}
Enter fullscreen mode Exit fullscreen mode

要将项目放置在网格区域中，请使用grid-area网格项目上的属性。

要将项目放置在网格区域上，您可以使用grid-area。

.grid {
  display: grid; 
  /* ... */
}

main {
  grid-area: main
}
Enter fullscreen mode Exit fullscreen mode

在CodePen上查看Zell Liew ( @zellwk )的Pen Grid-template-area。

如何记住这些属性

到目前为止，您已经学习了 6 个属性：

  1. grid-template-columns
  2. grid-template-rows
  3. grid-template-areas
  4. grid-column
  5. grid-row
  6. grid-area

记住这 6 个属性的一些技巧：

  1. 该template关键字只能在网格上使用
    1. 它们用于声明网格和命名区域
    2. 带有关键字的属性template是复数
  2. 网格项的属性没有template关键字
    1. 这些属性是独一无二的
    2. 这些属性影响定位

差距

创建网格时，可以在列和行之间创建空间。这些空间称为间隙。

有三个属性需要记住：

  1. grid-column-gap
  2. grid-row-gap
  3. grid-gap

grid-column-gap确定列之间的空间。

grid-row-gap确定行之间的空间。

grid-gapgrid-column-gap是和 的简写grid-row-gap。

对于这个简写：

  1. 价值column至上：column-gap / row-gap
  2. 如果您使用单个数字，则两个值都将是该数字。
/* Different values */
.grid {
  grid-column-gap: 1em;
  grid-row-gap: 2em;
}

.grid {
  grid-gap: 1em / 2em; 
}
Enter fullscreen mode Exit fullscreen mode 
/* Same values */
.grid {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

.grid {
  grid-gap: 1em;
}
Enter fullscreen mode Exit fullscreen mode

在CodePen上查看Zell Liew ( @zellwk )编写的Pen Explicit Grid with gap。

对齐事物

很多人对此感到困惑。

有六个属性可用于对齐事物：

  1. justify-content
  2. align-content
  3. justify-items
  4. align-items
  5. justify-self
  6. align-self

您可以在这里看到两组模式：

  • 第一组是justifyvsalign
  • 第二组是content，，items和self

这两组属性告诉你正在处理什么。如果你理解了 property 关键字，你就会知道如何使用它们。

两端对齐 vs 对齐

每个 CSS 网格都有两个轴：

  1. 主轴
  2. 横轴

当你执行justify某些操作时，你会根据主轴改变对齐方式。 当你执行align某些操作时，你会根据横轴改变对齐方式。

以下是识别主轴和横轴的简单方法：

  1. 确定语言的方向
  2. 主轴是你阅读语言的方式
  3. 横轴阅读是读完第一行结尾后的阅读方式。

我们以英语为例，你如何阅读英语？

  1. 从左到右
  2. 从上到下

因此主轴和横轴是：

  1. 主视图：从左到右
  2. 交叉：从上到下

主轴从左到右读取。横轴从上到下读取


主轴从左到右读取。横轴从上到下读取

注意：如果使用 改变语言方向，主轴和横轴也会发生变化writing-mode。

内容、物品和自我

justify-content并align-content允许您将网格本身与网格外部的可用空间对齐。仅当您的网格小于其定义区域时才需要这些属性。（这种情况很少见）。

.grid {
  justify-content: /* some value */; 
  align-content: /* some value */; 
}
Enter fullscreen mode Exit fullscreen mode

您可以从七个值中进行选择：

  1. 开始：将网格与轴的起点对齐
  2. end：将网格刷新到轴的末端
  3. 中心：将网格与轴的中心对齐
  4. 拉伸：网格填充轴（这是默认值）
  5. space-between：在网格项之间扩展空白。两端不留空白
  6. space-around：在每个网格项周围扩展空白
  7. space-evenly：将空白均匀分布在所有网格项（包括末端）周围

7 种可能的对齐值及其作用


7 种可能的对齐值及其作用

上面的图片取自 CSS Tricks 的《网格完全指南》。它详细解释了每个值的作用。你可以阅读它来了解更多信息。

这里的重点是记住这些属性以及如何使用它们。让我们回到下一组属性。

justify-items和align-items让你可以将网格项与其各自单元格中任何可用的空白对齐。大多数情况下，当你尝试对齐元素时，你会寻找justify-items或align-items。

.grid {
  justify-items: /* some value */; 
  align-items: /* some value */; 
}
Enter fullscreen mode Exit fullscreen mode

您可以从相同的四个值中进行选择：

  1. 开始：将项目刷新到轴的开始处
  2. end：将项目刷新到轴的末尾
  3. center：将项目与轴的中心对齐
  4. 拉伸：填充轴（这是默认值）

4 种可能的对齐值及其作用


4 种可能的对齐值及其作用

justify-selfandalign-self的作用与justify-itemsand相同align-items。区别在于它只允许更改一个网格项的对齐方式。

.grid-item {
  justify-self: /* some value */;
  align-self: /* some value */;
}
Enter fullscreen mode Exit fullscreen mode

隐式网格

假设你创建了一个 CSS 网格，但行数不够。在下面的例子中，我仅创建了一个包含三个项目的显式网格。（3 列，1 行）

.grid {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-row: 3em;
}
Enter fullscreen mode Exit fullscreen mode

但我有六件物品！

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

当你的显式网格空间不足时，CSS Grid 会自动帮你创建额外的网格。默认情况下，它会创建更多行。

如果要切换网格方向，则设置grid-auto-flow为row。

这些自动创建的部分称为隐式网格。

您可以使用以下两个属性调整自动创建的列或行：

  1. grid-auto-columns
  2. grid-auto-rows
.grid {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 3em; 
  grid-auto-rows: 6em;
}
Enter fullscreen mode Exit fullscreen mode

在CodePen上查看Zell Liew ( @zellwk )编写的 Pen Implicit 网格。

如何记住隐式网格

auto是您要注意的关键字。

  1. template创建显式网格
  2. auto创建隐式网格

我经常使用隐式网格。我会在另一篇文章中分享如何使用 CSS 网格。

总结

这几乎涵盖了 80% 网格所需的所有 CSS 网格属性！以下是已学属性的总结：

  1. 创建网格
    1. 明确：
      1. grid-template-columns
      2. grid-template-rows
      3. grid-template-areas
    2. 隐式：
      1. grid-auto-columns
      2. grid-auto-rows
  2. 差距
    1. grid-column-gap
    2. grid-row-gap
    3. grid-gap
  3. 在网格中定位项目
    1. grid-column
    2. grid-row
  4. 对齐事物
    1. justify-content
    2. align-content
    3. justify-items
    4. align-items
    5. justify-self
    6. align-self

希望以上内容能帮助你记住 CSS Grid！祝一切顺利！

感谢阅读。本文最初发布在我的博客上。如果您想阅读更多文章来帮助您成为更优秀的前端开发人员，请订阅我的新闻通讯。

鏂囩珷鏉ユ簮锛�https://dev.to/zellwk/how-i-remember-css-grid-properties-9i5
Devto 翻译
PREV
如何将包发布到 npm（行业惯例）
NEXT
使用 Jest 和 Supertest 进行端点测试