满足您大多数布局需求的4个CSS网格属性（和一个值）

CSS Grid赋予我们强大的网站布局系统。CSS-Tricks指南全面概述了Grid的属性和布局示例。我们将采用相反的方法，向您展示满足大多数布局需求所需的最少Grid属性集。

这五个属性将帮助您快速上手：

• display（用于grid值）
• grid-template-columns
• grid-gap
• grid-auto-flow
• grid-column / grid-row

以下是它的简易性。假设您想为小型、中型和大型屏幕实现以下布局。

这是我们将使用的标记：

<nav><ul>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
</ul></nav><div></div>

如果我们应用一些基线样式，我们将得到以下结果，这对于小型屏幕已经足够了：

现在我们可以深入了解Grid属性了！

使用display: grid将页面划分为独立的布局容器

首先，我们需要确定页面中哪些部分应该与Grid布局对齐。可以为整个页面定义单个Grid布局。但是，对于结构非常复杂的网站（例如新闻网站），处理大型Grid很快就会变得难以驾驭。在这种情况下，我建议将其分解为几个独立的Grid容器。

像这样：

您在哪里划定什么是Grid和什么不是Grid的界限？这是我遵循的一个个人经验法则：

如果页面特定部分的布局不适合相邻或周围页面部分的Grid，则将该部分设为其自己的Grid容器。

我已经在带有.container-main类的页面部分中绘制了Grid线，如下图所示。您可能会注意到，来自标记的.container-inner类部分并不完全适合行的Grid。

这是另一个可能的布局，如果选择更精细的线栅格，则小部分适合周围的Grid。此处不需要单独的Grid容器。

首先，让我们将.container-main转换为Grid容器。这是CSS Grid的基本构建块——使用display属性将元素转换为Grid容器：

.container-main {
  display: grid;
}

我们也需要对其他Grid容器执行相同的操作：

.container-inner {
  display: grid;
}

.container-nav {
  display: grid;
}

使用grid-template-columns定义所需的列

接下来，我们将定义每个Grid容器中所需的列数以及这些列的宽度。我关于列数的指导原则：使用不同屏幕尺寸所需最大列数的最小公倍数。

这是如何工作的？.container-main元素在中等尺寸的屏幕上共有两列。如果我们将其乘以大型屏幕上的列数（三列），我们将得到总共六列。

我们也可以对导航（.container-inner元素）执行相同的操作。中等尺寸的屏幕上有三列，我们将其乘以大型屏幕上的一列，得到总共三列。

.container-nav元素没有列数。在这种情况下，Grid系统应自动将列数调整为菜单元素的数量。在导航中添加或删除项目是很常见的，如果它能相应地做出响应，那就太好了，这是Grid稍后可以帮助我们实现的功能。

好的，所以我们定义了每个Grid容器的列数。让我们使用grid-template-columns属性将它们设置到位。但是，首先是一些细节：

• grid-template-columns属性仅用于Grid容器。换句话说，您不会在容器内的Grid项目上找到它（至少是正确地）。
• 该属性接受许多不同的值，这些值既定义列数，也定义列的宽度。我们在这里感兴趣的是分数 (fr) 单位。我强烈建议您查看Robin的概述，因为它对Grid是独一无二的，并且在计算如何将Grid元素放入Grid容器方面做得非常出色。

我们需要在.container-main中使用六个等宽列。我们可以这样写：

.container-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

或者，我们可以使用repeat()函数将其简化为更易读的内容：

.container-main {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

让我们利用这些知识也将其应用于我们的.container-inner元素，我们决定它需要三列。

.container-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

使用grid-gap在Grid项目之间添加间距

默认情况下，Grid使用其在Grid容器中的所有空间来容纳Grid项目。让元素紧挨在一起可能是设计要求，但对于我们正在制作的特定布局来说并非如此。我们希望事物之间有一些呼吸空间！

为此，我们有grid-gap属性。同样，这是一个仅适用于Grid容器的属性，它所做的就是在Grid项目之间创建垂直和水平间距。它实际上是一个简写属性，它结合了grid-row-gap的垂直间距功能和grid-column-gap的水平间距功能。方便的是，我们可以像那样分解它们，但在这种情况下，我们在每个方向上使用相同的间距量，简写grid-gap更容易编写。

我们希望在.container-main中的Grid项目之间有20px的间距，在.container-inner中有10px的间距，在.container-nav中有5px的间距。没问题！每个Grid容器只需要一行代码。

.container-main{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 20px;
}

.container-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.container-nav {
  display: grid;
  grid-gap: 5px;
}

使用grid-column和grid-row确定各个Grid项目的大小

现在是时候将布局变成我们想要的样子了！

首先是grid-column属性，它允许我们将Grid项目扩展到n列，其中n是要跨越的列数。如果您认为这听起来非常像HTML表格中允许我们跨多行扩展单元格的rowspan属性，您不会错的。

当我们在.container-main元素中的Grid.item上以及.container-inner中的.item-inner元素上使用它时，它看起来像这样：

.item {
  grid-column: span 6;
}

.item-inner {
  grid-column: span 3;
}

我们在这里说的是，每个项目在我们的主容器中跨越六行，在我们的内部容器中跨越三行——这是每个容器中列的总数。

CSS Grid的一个有趣之处在于，我们可以命名Grid的行。它们开箱即用就带有隐式名称，但命名它们是区分轨道上每一列的起始线和结束线的一种有效方法。

我们可以更改项目在不同断点处应跨越的列数和行数：

@media screen and (min-width: 600px) {
  .item-type-b {
    grid-column: span 3;
  }

  .item-inner {
    grid-column: span 1;
  }
}

@media screen and (min-width: 900px) {
  .item {
    grid-column: span 2;
    grid-row: span 2;
  }

  .item-type-b{
    grid-row: span 1;
  }

  .item-inner{
    grid-column: span 3;
  }
}

使用grid-auto-flow控制元素的放置

CSS Grid将元素一个接一个地放置在行中。这就是为什么我们示例中的结果目前看起来像这样的原因：

可以通过将grid-auto-flow属性设置为column来实现逐列放置（row是默认值）。我们的布局将在两种情况下受益于列式放置。首先，它使我们的菜单项最终以水平方向显示。其次，它将容器类的元素带入所需的组合。

最终结果

结论：更多还是更少规范？

Grid系统允许我们在座右铭下工作，“根据需要进行尽可能多的规范，但尽可能少”。为了说明您只需要了解多少就可以使用CSS Grid构建甚至复杂的布局，我们只介绍了将元素转换为CSS Grid容器以及将其中的项目转换为Grid项目所需的一些规范。

CSS Grid支持以下附加用例：

• 我们希望制定更少的规范，以便更多地依赖自动定位。
• 我们希望制定更多规范，以便确定结果布局的更多细节。

如果适用第一种情况，则值得考虑以下其他Grid选项：

• 使用grid-template-columns创建Grid时，您可以使用auto关键字让Grid系统自动确定各个列的宽度，或使用min-content、max-content或fit-content设置将其调整到现有内容。
• 您可以借助repeat、auto-fill、auto-fit和minmax让Grid系统自动确定所需列的数量。甚至媒体查询也可能变得多余，而这些工具有助于在不添加更多媒体查询的情况下提高灵活性。

以下是我推荐的关于此主题的一些文章：成为CSS Grid忍者！和CSS Grid中的自动调整大小的列：auto-fill与auto-fit。

如果适用第二种情况，CSS Grid为您提供更多设置选项：

• 您可以使用您选择的单位（例如px或%）明确指定列的宽度，使用grid-template-columns属性。此外，grid-template-rows属性可用于定义行数和宽度，如果存在特定数量的行。
• 您还可以将特定列号或行号定义为grid-column和grid-row的值（或使用grid-column-start、grid-column-end、grid-row-start或grid-row-end属性）。

我们甚至还没有涉及CSS Grid对齐！尽管如此，我们无需讨论该主题就可以完成如此多的工作，这表明CSS Grid功能多么强大。

以上是满足您大多数布局需求的4个CSS网格属性（和一个值）的详细内容。更多信息请关注PHP中文网其他相关文章！