如何使用 CSS 网格布局创建卡片布局

编者注：这篇客座文章是由 Abbey Fitzgerald 撰写的，他是一位用户体验软件工程师和网页设计师，他热爱编写代码的艺术。

CSS 网格布局正在改变网页设计师的工作方式，允许以更有效的方式布置网站内容。

人们期待已久，但最终这种方法真正流行起来，并且在许多情况下，它已经投入生产。 它彻底改变了网站的设计方式，一旦设计师掌握了它，它将为网页布局提供更大的灵活性。

如果您尝试过使用 CSS Grid 进行设计并查看了 Web 上的教程，您可能已经找到了与整体布局方法相关的信息。 诸如：页眉、内容、页脚等。

然而，CSS Grid 也可用于其他网站细节，例如卡片。 卡片布局是显示内容的常用方式，可以使用 CSS Grid 高效地创建它们。 通过使用这种方法，卡片内容区域很容易重复，可以在许多不同的设备类型上查看，并且大小很容易控制。

CSS 网格布局工具

在进行过程中，您会想要检查页面上的内容。 Firefox 具有用于查看网格区域的出色开发人员工具。 使用 Firefox 开发人员工具，您可以看到勾勒出网格轮廓的叠加层。 Firefox Developer Edition 也有这个能力。

选择要显示的叠加网格（根据您的设计，可以有多个）。 网格显示设置允许您通过显示行号、区域名称以及您希望行如何延伸来更仔细地查看。 这将有助于您设计。

使用 CSS 网格布局的简单卡片

如果您是 CSS Grid 的新手，您会想要温习一下基础知识并创建一个简单的 CSS Grid 布局。 卡片是显示内容的绝佳方式，也是一种有趣且易于使用的 UI 元素。 它们还为用户提供了一种很好的格式，可以快速扫描内容并与他们最感兴趣的内容互动。卡片还允许设计人员以视觉上吸引人的方式设置内容格式，包括精美的图像、介绍内容、链接等等！

卡片和整体页面布局

顺便说一句，了解 CSS Grid 不必用于整个页面布局很重要。 如果需要，可以在页面的某些区域使用网格。 由于这是关于卡片布局的教程，因此即使页面的其余部分不使用 CSS 网格，也可以在此处专门使用网格方法。 只要定义了网格区域并display: grid; 在包装器上声明，可以使用这种方法。

使用一定数量的卡片

在某些情况下，规划一定数量的卡片很容易。 对于一定数量的内容，卡片的数量将保持不变。 例如，可能有四张卡片解释业务产品，每张产品都在自己的卡片上。

对于这个示例（以及其他示例），所有.card项目都在.cards容器元素中。 要做到这一点，非常简单。

 [css] .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1rem; }   .card { border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; } [/css]

将.cards的值显示到网格很重要。 没有这个，就不能创建网格区域。 下一步是定义grid-template-columns并选择样式。 实际的卡片样式将使用.card类声明。

在此示例中，您将看到多个带有.card类的文章标签。 在 Codepen 上查看。

重复设置卡数

这是卡片开始成形的地方。 要在每行中创建可变数量的列，请将 repeat 与repeat()函数一起使用。 该函数有两个参数：重复次数和重复值。

例如， grid-template-columns: repeat(3, 200px); 计算到grid-template-columns: 200px 200px 200px; .

小数单位

您会看到示例代码使用了“fr”。 那到底是什么？ 这种测量单位在 CSS Grid 中流行起来。 Fr 表示“小数单位”， 1fr占用可用空间的 1 部分。 它有助于简化空间计算。

小数单位可以单独使用，也可以让您指定1fr的宽度，您也可以添加子元素。 多个 fr 将在所有子元素之间平均共享。

可以指定不同的小数单位。 例如，当网格列为1fr 2fr 1fr时，两个小数单位占用的空间是一个小数单位的两倍。

对动态数量的卡片重复

在某些情况下，您可能不知道所需卡片的数量，因此计划固定数量是行不通的。 将采用与 repeat 相同的方法，但可以选择使用自动填充来适应尽可能多的需要。

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

除了auto-fill之外还需要宽度声明。 请牢记，对于 px 值，当没有足够的空间容纳卡片时，右侧可能会有空间，但情况不一定如此，稍后您将看到。

Minmax 用于更好地控制卡片宽度

Minmax 是完美的解决方案，因为小数单位本身会使卡片全宽。 在样式声明中同时添加 repeat 和 minmax 将消除可能的空白区域，并且卡片会显得更加流畅。

 [css] grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); [/css]

列将始终适合网格，卡片至少为 200 像素。 当最小空间不能完全适合空间时，这就是最大宽度发挥作用的地方。 当另一张 200px 宽度的卡片放不下时，其他卡片将大于 200px，因此它们会拉伸以填充更多空间并平均分配。 [文章id=”21612″ align=”right”]

移动的

由于已经计划好最小和最大的卡片，现在是谈论移动的好时机。 卡片在更大和更小的设备上都能很好地工作，因为内容是可消化的块，而且卡片可以很容易地放大和缩小。 CSS Grid 有助于创建出色的移动体验，在某些情况下，它比单独的媒体查询要容易得多。

在此示例中，卡片需要缩小尺寸以适应移动设备并放大尺寸以成为可用空间的一小部分，因此它们在较小的设备上显示为全宽，不需要单独的媒体查询：

 [css] grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [/css]

卡片的最小宽度为 300px。 行中会出现尽可能多的 300px 卡片。 当设备非常小时，很可能没有可用空间连续放置两张卡。 这就是1fr发挥作用的时候。 分数单位非常适合响应式设计。 当两张 300 像素的卡片放不下时，这就是移动视图变得非常明显的地方。 当1fr被声明为最大宽度时，一张卡片将占据所有可用空间并且它们将相互堆叠。

网格间隙

现在卡片的宽度已经确定，需要决定卡片之间的空间。 此属性在网格容器上可用，它使在设计中创建装订线变得容易。 Grid-column-gap在每张卡片之间创建空间。 当您看到grid-gap时，它指的是grid-row-gap和grid-column-gap的简写。 Grid-row-gap是卡片上下的空间， grid-column-gap是卡片左右的空间。

CSS 网格布局资源

说到 CSS 网格布局，有很多东西要学，也有很多可能性。 了解 CSS 网格布局的最佳方法是进行一些额外的阅读和试​​验。 那里有很多很棒的资源，但这里有一些可以帮助您入门：

• 网格示例
• Wes Bos 的 CSS 网格布局课程
• Mozilla 介绍 CSS 网格