Logo

菜单

发布于 2026-01-06 3 阅读
0

CSS Grid 第一部分

CSS Grid 第一部分

CSS 网格是另一种类似于Flexbox 的布局算法，旨在简化网站和复杂应用程序的用户界面设计，尽管两者之间存在一些细微差别。

与单轴（十字轴或主轴）布局的 Flexbox 不同，网格布局针对二维布局进行了优化，这意味着网格项可以放置在网格容器中的任意位置。您可以将 CSS 网格视为数学中的图。

使用 CSS Grid，开发人员可以在不修改标记的情况下改变文档的视觉布局结构，因为可以使用网格特定的属性将网格项放置在网格容器中的任何位置。

CSS Grid 规范相当技术性，因此我将在本文中尽量少用到它。

本文将使用以下代码片段，并根据实际情况进行一些修改。请分别以 .css 和 .html 为扩展名保存代码片段.html，并确保 CSS 文件已链接到 HTML 文件。请记住，所有 HTML 代码片段都应放置在 HTML 的.css开始标签和结束标签之间body。

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2"></div>
  <div class="child-3"></div>
  <div class="child-4"></div>
  <div class="child-5"></div>
  <div class="child-6"></div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.parent {
  /* We will add stuff later */
}

/*
 * We are using a attribute selector to select all
 * child boxes
*/
[class ^= "child"] {
  width: 100%;                 /* The width of the box */
  height: 150px;               /* The height of the box */
  margin-right:0.5em;          /* Some outer spacing to the right of the box */
  margin-bottom: 0.5em;        /* Some outer spacing to the bottom part of the box */
}


/*
 * The child elements have been given colors so that
 * we can tell them apart
*/
.child-1 {
  background-color: tomato;
}

.child-2 {
  background-color: #1560bd;
}

.child-3 {
  background-color: #3eb489;
}

.child-4 {
  background-color: #ffc40c;
}

.child-5 {
  background-color: #da680f;
}

.child-6 {
  background-color: #0a7e8c;
}
Enter fullscreen mode Exit fullscreen mode

请注意，所有屏幕截图均来自Firefox 70浏览器及其开发者工具。

既然如此，我们开始吧。

与 Flexbox 类似，CSS Grid 布局算法也有一些关键术语，可以帮助我们更好地理解它。这些术语是 CSS Grid 的理论概念，为了更直观地了解其实际应用，我们将介绍一些实现这些概念的网格属性。

网格布局术语

以下术语与 CSS Grid 相关：

  • 网格容器
  • 网格项
  • 网格线
  • 网格单元
  • 网格轨道
  • 网格区域
  • 网格间隙

网格容器

网格容器是指任何display属性设置为网格的元素。

请将 CSS 规则更新.parent为以下内容：

.parent {
  /* All other properties remain the same */

  display: grid;  /* Add this */
}
Enter fullscreen mode Exit fullscreen mode

在浏览器中加载 HTML。您不会看到任何明显的变化，直到您使用开发者工具，在“布局”选项卡下选中“网格” ，然后单击“叠加网格”下的复选框，并将鼠标悬停在上面。div.parent

网格容器中的网格项

网格项

这是网格容器的直接一级子元素，会自动放置在网格上，您也可以将每个网格项放置在网格容器中的任何位置。

我们代码片段中的彩色方框是网格项的示例。

浏览器中的彩色方框

网格线

将网格分隔成不同部分的水平（行）或垂直（列）线。

网格线通过编号来标识，起点和终点都位于网格的外边界。网格线也可以命名，以便于识别，我们稍后会看到。

将以下 CSS 规则更新.parent为以下内容，然后保存文件：

.parent {
  /* All other properties remain the same */

  /*
   * The following properties are just cosmetics
   *  that will enable us to see the grid lines
  */
  width: 70%;      /* Add this */
  margin: 0 auto;  /* Add this */
}
Enter fullscreen mode Exit fullscreen mode

在开发者工具的网格显示设置中，选中“无限延伸线条”复选框。

网格容器中的网格项

现在，点击“显示行号”。

网格容器中的网格项

网格单元

网格单元格是网格行和网格列的交点，类似于表格中的单元格。

为了实际演示这一点，我们将使用一个名为grid-template-columns.

请将 CSS 规则更新.parent为以下内容：

.parent {
  /* All other properties remain the same */

  grid-template-columns: 50% 50%;      /* Add this */
}
Enter fullscreen mode Exit fullscreen mode

保存并刷新浏览器。

网格容器中的网格项

在之前的代码示例中，我们使用百分比来设置列面积。CSS Grid 定义了一个名为分数单位的附加计量单位。

分数单位表示fr网格容器中可用空间的一部分。它将总可用空间分割成若干部分。基于此，我们可以将之前的代码重写为：

.parent {
  /* All other properties remain the same */

  grid-template-columns: 1fr 1fr;  /* this will divide the grid into 2 columns */
}
Enter fullscreen mode Exit fullscreen mode

保存文件并刷新浏览器。你会发现输出结果相同。

最后，请根据单位将表格分成三列fr。您的输出结果应与下图类似。

网格容器中的网格项

还有一个用于控制行和列大小的函数，它比第一个minmax()函数更高级一些。该minmax()函数允许我们声明列的最小和最大宽度。

网格轨道

在 CSS Grid 术语中，“track”一词既可以指行，也可以指列，这意味着“行轨道”是水平的，“列轨道”是垂直的。

从下图可以看出，“番茄”形图案和蓝色方框代表行轨道。“番茄”形图案、绿色和棕色方框代表列轨道。

网格容器中的网格项

网格区域

网格区域是指四条指定网格线之间的矩形区域。网格区域可以覆盖一个或多个单元格。通过grid-template-area网格容器的属性，我们可以定义跨越网格中一个或多个单元格的矩形区域，并为其命名。然后，我们可以使用这些名称，通过网格项的属性在网格中放置项目grid-area。

现在更新.parentCSS 规则，使其与以下内容匹配：

.parent {
  /* All other properties remain the same */

  grid-template-columns: 1fr 2fr 1fr; /* This will split the grid into three columns */
  grid-template-rows: auto 1fr;      /* This will split the grid into two rows */
}
Enter fullscreen mode Exit fullscreen mode

接下来，我们需要指定列数和行数grid-template-areas。该属性的值取决于网格中的列数和行数。让我们看看它是如何工作的。

.parent {
  /* All other properties remain the same */

  grid-template-areas:
           /* column 1*/ /*column 2*/  /*column 3*/
/* row 1*/ "tomato       tomato        blue"
/* row 2*/ "yellow       yellow        blue";
}
Enter fullscreen mode Exit fullscreen mode

保存文件并刷新浏览器。然后在开发者工具中点击 “显示区域名称”，这样就会在每个网格项上显示区域名称。

网格容器中的网格项

下面的代码片段会将第一个方框（番茄）移动到“蓝色”区域。

.child-1 {
  /* All other properties remain the same */

  grid-area: blue;
}
Enter fullscreen mode Exit fullscreen mode

保存并刷新浏览器。

网格容器中的网格项

我们还可以让黄色区域child-3变宽。

.child-3 {
  /* All other properties remain the same */

  grid-area: yellow;
}
Enter fullscreen mode Exit fullscreen mode

浏览器中显示的结果。

网格容器中的网格项

网格间隙

这是轨道之间的空隙，通常被称为沟槽。

将以下内容添加到.parentCSS 规则中：

.parent {
  /* All other properties remain the same */

  grid-gap: 1.2em;
}
Enter fullscreen mode Exit fullscreen mode

浏览器中显示的结果。

格栅式排水沟

它grid-gap还有两个相关的属性，分别用于声明行和列，它们是：

  • grid-column-gap
  • grip-row-gap

您还可以为 ` grid-gapand` 提供两个值，它们将分别作为 `and` 和grid-column-gap`.`的简写形式grip-row-gap。请看下面的示例代码：

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

将物品放置在网格上

CSS Grid之所以如此强大，其中一个原因就是它允许我们指定网格中任何网格项的显示位置。听起来很棒吧！

在网格上放置网格项的最基本方法是为每个网格项声明 `<line>`grid-column和 `<line>`值。`<line> ` 和 ` <line>` 的值对应于网格上的行。grid-rowgrid-columngrid-row

请更新您的 CSS，删除所有子元素中的grid-gap`<div>`和 `<grid>`标签，然后刷新浏览器。template-areas .parent

您的输出结果应与下图类似。图中，我已启用“显示行号”选项，并且“开发者工具”已停靠在页面底部。

网格容器中的网格项

让我们把.child-1（番茄色的方框）从它当前的位置移动到网格的右下角。

首先，我们需要确定列数和行数。在我们的表格中，很明显有三列两行。

首先，我们需要将方框移动到第三列：

.child-1 {
  /* All other properties remain the same */

  grid-column: 3;
}
Enter fullscreen mode Exit fullscreen mode

保存并刷新浏览器。

网格容器中的网格项

从上图可以明显看出，现在我们有了三行。这是因为当我们把盒子移动到第三列时，其他盒子被向下推，无法再容纳在网格中，所以浏览器不得不创建另一条网格线，这条线被称为隐式线。

隐式线是指当我们在现有行或列之外放置项目时，浏览器自动创建的一条线。

盒子目前位于这个位置，我们已经完成了目标位置的一半，现在我们需要把盒子移动到第二行。你可能会问：现在我们有三行了，为什么是第二行呢？

请记住，第三行是浏览器创建的隐式线条；如果网格项能够适应网格，则该线条将不再存在。

要移动这个盒子，我们将使用一个grid-row属性，并将盒子的新位置作为值提供。位置值的指定方式可能看起来有点奇怪，但 CSS 代码中的注释应该能帮助你理解。

.child-1 {
  /* All other properties remain the same */

  grid-row: 2/3;        /* This means row 2 column 3 */
}
Enter fullscreen mode Exit fullscreen mode

保存并刷新浏览器，框就会显示正确，我们想要的就是这个。

网格容器中的网格项

以下代码片段将移动.child-2到第二行第二列。

.child-2 {
  /* All other property remain the same */

  grid-column: 2;   /* Move to the second column */
  grid-row: 2/2     /* Move to the second row and place in the second column */
}
Enter fullscreen mode Exit fullscreen mode

浏览器中显示的结果。

网格容器中的网格项

我们还可以通过指定起始位置和结束位置，使网格项跨越多列。位置之间用斜杠分隔，正如我们之前解释的那样grid-row。

现在我们来让它child-3跨越三列。

.child-3 {
  /* All other property remain the same */

  grid-column: 1/4; 
}
Enter fullscreen mode Exit fullscreen mode

保存并刷新浏览器。

到目前为止，我们一直使用数字来指定网格线，但还有另一种方法叫做命名线。

命名行用作网格容器中声明的列号的别名.parent。命名行放置在模板列值之前的方括号中。

将以下内容添加到.parentCSS 规则中：

.parent {
  /* All other properties remain the same */

  grid-template-columns: [line-one] 1fr [line-two] 2fr [line-three] 1fr [line-end];
}
Enter fullscreen mode Exit fullscreen mode

现在让我们child-4使用新命名的线路进行移动。

.child-4 {
  /* All other properties remain the same */

  grid-column: line-one/line-three;  /* This is equivalent to grid-column: 1/3;*/
}
Enter fullscreen mode Exit fullscreen mode

保存并刷新浏览器。你会发现.child-3（黄色方框）会跨越三列，并回到它在网格中的原始位置。

网格容器中的网格项

请注意，最后一个框位于底部，因为child-3它在网格顶部跨越了三列child-4，现在也跨越了三列，这将使框之间的距离进一步拉远，因此浏览器不得不创建一条隐式线来容纳最后一个框。

如果删除该grid-column属性及其值.child-3，则.child-4隐式线将不复存在，网格项将自动对齐到其位置。

还有另一个需要注意的关键字叫做 `grid-class` span，我们可以在 `grid-class` 和 `grid-rows` 属性中使用它grid-column来grid-row指定网格项应该跨越多少列或行。语法很简单：

.grid-item {
  grid-column: 2 span;   /* the grid item will span 2 columns */
}

.grid-item {
  grid-column: 2/3 span; /* the grid item will span two columns from line 2 to 3  */
}
Enter fullscreen mode Exit fullscreen mode

不妨试试看。

在下一部分中，我们将继续讨论如何在 CSS 网格中对齐项目。

文章来源：https://dev.to/ziizium/css-grid-part-1-3f57
如何在 Javascript DE...
构建SaaS？用户管理UI计费架构结论