现代 CSS 网格解决方案解决常见布局问题

布局和组合是 CSS 中最具挑战性的主题之一，尤其是在需要考虑响应式设计的情况下。我们经常会选择不使用媒体查询。但是，为各种断点添加过多的媒体查询会使 CSS 难以维护。但有了网格，我们就可以克服媒体查询带来的疲劳。这不仅使我们的 CSS 更易于维护，还能提升用户体验。我们可以让 CSS 自行处理可用空间。在本文中，我将介绍三种可以改进您（个人）网站的布局实现方法。

动态居中布局

我们都知道margin: 0 auto要居中布局。这对于文章页面来说很理想，对吧？但是，如果您希望图片等元素超出文章的最大宽度，该怎么办？我们可以通过使用负边距来实现。但这只适用于大屏幕。在小屏幕上，负边距可能会破坏您的网站。尤其是在移动设备上，与平板电脑相比，在移动设备上应用较小的侧边距时。因此，我们必须添加许多媒体查询，以确保此效果在所有屏幕尺寸上都能按预期发挥作用。但现在，我们得到了如下所示的酷炫效果。

当你想要更改这些超宽元素时会发生什么？你需要检查多个媒体查询，以确定你的更改是否适用于各种屏幕。如果我们可以减少媒体查询并仍然实现这种效果呢？最近我偶然看到了Dave Geddes 的这篇文章。它向我们展示了如何使用 CSS 网格实现这种效果。你创建一个三列的网格。中间一列是实际的内容区域，而外面两列充当填充，同时也创造了 的效果margin: 0 auto。

article {
  display: grid;
  grid-template-columns:
    minmax(2rem, 1fr)
    minmax(auto, 65ch)
    minmax(2rem, 1fr);
}

/* sets all children in the middle of the screen */
article > * {
  grid-column: 2;
}

/* overrides the above for images to be wider, but centered */
article > img {
  grid-column: 1 / 4;
  justify-self: center;
  width: 100%;
  max-width: 100ch;
}

侧边距在不同屏幕尺寸下应该有所不同。在较小的屏幕上，您需要限制空间浪费；而在较大的屏幕上，增加侧边距可以提升视觉质量。但是，使用上述解决方案，您仍然需要媒体查询来使用不同的侧边距。您可以通过增加网站的流畅性2rem来缓解这个问题。我们可以用类似 的内容替换calc(1rem + 1 * var(--ratio))。这样，侧边距就会随着屏幕尺寸的变化而自动变化，而无需媒体查询。现在，我们的文章布局已经动态且易于维护。

响应式多列网格系统

谁不知道响应式多列布局？如上图所示，这种布局的列数会随着屏幕尺寸的变化而变化。这个问题通常使用类似Bootstrap 网格系统或自己的实现来解决。但是，这会限制每个屏幕尺寸的列数。如果要设置五列，在十二列系统中是无法实现的。此外，您还必须确定每个元素在不同屏幕尺寸下的列跨度。

如果您的网格过多，CSS 或 HTML 的扩展性就会很差。幸好现在有了 CSS 网格。使用 CSS 网格时，我们不再定义每个元素的列跨度，而是让浏览器自行决定屏幕上的列数。您可以使用下面的代码片段实现图示的可扩展布局。让我们来详细分析一下！

.grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

使用repeat()，我们告诉浏览器需要重复其参数。例如，repeat(3, 1fr)将创建一个由三个大小相同的列组成的布局，这些列将填满整个屏幕。但是，我们的元素几乎总是具有最小宽度。使用 ，1fr我们可以将它们拆分开来。使用minmax(20rem, 1fr)，每列的最小宽度为20rem，但在更大的屏幕上可以缩放。

神奇之处在于，将固定数字替换为auto-fit或auto-fill。使用这两个选项，我们让浏览器决定屏幕上可用的列数。在浏览器屏幕上使用auto-fill和时，会创建四列。在本例中，该选项最多创建四列。当网格中只有两个元素时，列数会减少到两列。这为响应式布局提供了极大的灵活性，而无需使用媒体查询。minmax(20rem, 1fr)90remauto-fitauto-fit

你知道吗grid-column: span 2？你可以给元素设置属性。设置后，元素将跨越两列。所以并非所有元素都必须大小相同。缺点是，网格中至少会有两列，并且任何潜在的空隙都无法填充。

双向卡片布局

您经常会看到大型卡片布局，图片和内容并排放置，占据很大的水平空间。它们之间通常有一个固定的比例（例如 50%-50%）。缩小屏幕尺寸时，您不希望这两者并排放置，而是上下放置。为了更好地利用可用空间，比例也发生了变化。图片的高度不再是 50%。下面的线框图直观地展示了这一概念。

这听起来不像个熟悉的问题吗？嗯，的确如此。它几乎与我之前描述过的自动缩放网格布局相同。不过，我们需要grid-template-rows: auto 1fr在类示例中添加一个小细节grid。该auto值会以改变的比例适应垂直方向。这假设图像是横向的。由于只有两个子元素（图像和内容），CSS 网格会处理剩下的事情。

在 CSS 网格中，当元素数量不足时，行和列的定义会被忽略。在上面的例子中，当元素数量仅够填充第一行时，1fr第二行的定义会被忽略。

结论

CSS 网格能够解决响应式布局问题。有一些方法可以实现上述目标，甚至无需使用媒体查询。但在大多数情况下，它们需要更多 CSS 才能工作，这使得这些解决方案更难以维护。尤其是当与流畅性CSS 网格（和弹性框）结合使用时，您可以创建随屏幕尺寸流动的网站，而无需担心断点。我的意思是，它们被称为断点是有原因的，对吧？