使用 CSS Grid 创建响应式网页设计

如果你对网页设计有所了解，你就会知道用 CSS 完成设计实际上只是一种折中方案。我们仍然需要兼顾平板电脑和手机的用户体验。现在超过 50% 的网络活动都是在移动平台上进行的，所以如今，移动优先的设计应该成为一种主流思维。在我完成我的在线作品集的造型后，我立刻意识到了这一点，我得说，它看起来相当不错。但是，把它放到手机上看呢？它看起来就像一堆垃圾。这时我才了解到媒体查询的重要性。根据屏幕尺寸修改 CSS。现在，我深入研究 React，使用样式化组件和 CSS 网格，我再次发现自己处于一个通常由查询引导的分水岭。幸运的是，CSS 网格有一些方便的工具，称为自动填充和自动调整属性，可以减轻一些以前繁琐的任务。

媒体查询

以前，如果我想让我的应用程序或页面响应式布局，我必须单独选择窗口大小，以及需要随之缩放的 CSS，特别是针对包含各个项目的行/列。例如，它看起来像这样：

@media only screen and (max-width: 767px) {
    body { font-size: 16px;}
    section { padding: 30px 0;}

    .row { padding: 0 4%; }
    .col {
        width: 100%;
        margin: 0 0 1% 0;
    }

@media only screen and (max-width: 1200px) {
  .row { padding: 0 2%;}
}

在这里，我选择宽度并指定特定的行填充和宽度，这些都可以工作，并且肯定会使网站响应更快，但最近在使用 react 并且有一个可以使用网格的页面时，我遇到了自动调整和自动填充功能，这让我的生活变得轻松多了。

自动适应

举例来说，一个应用程序获取一个项目并将其放入网格格式的列中。

export const CoinGridStyled = styled.div `
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 15px;
  margin-top: 30px;
`

这里我们设置了 5 列，每列占页面的一小部分，无论大小如何。即使我们扩大或缩小窗口，每行始终会有 5 个项目，只是大小会有所调整。但如果我们将窗口改为自动调整大小，如下所示：

  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));

现在，每行将始终适配其所能容纳的内容。因此，扩大窗口后，每行将出现超过 5 个项目，具体取决于窗口大小，最大可达 130px。因此，随着窗口的扩大，我的行将至少包含 2 个项目（窗口宽度为 130px 时最多可容纳 2 个项目），最多可容纳 10 个项目。但这意味着，即使我只有一个项目，它也会拉伸该项目以适应页面长度。更准确地说，自动调整“通过扩展当前可用的列，使其占据所有可用空间，从而使其适应空间。因此，在这种情况下，我更喜欢使用自动填充。

自动适应

在这里，我们将包含以下代码：

  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));

现在，有了自动跟随功能，它会“用尽可能多的列填充行”。所以现在对象不会以任何方式被拉伸。空间是固定的，每个对象只会占用所需的空间，不会超过。

现在有了 gird，我们不再需要媒体查询，感谢上帝。