使用这3个属性，就能轻松实现响应式网格布局（CSS grid layout）

喜欢ヅ旅行 2022-09-17 03:04 112阅读 0赞

![b7d028e836ab748d3c3fd1ed79f3410e.png][]

英文 | http://www.js-craft.io/blog/making-a-responsive-css-grid-layout-with-just-3-properties/

如果我告诉你，你只需要知道 3 个 css 属性就可以制作一个完全响应式的 css 网格，如下所示：

![59e156d56bd051c5c1bf4016ad150274.png][]

让我们从 html 布局开始。只是一个容器和对应于文章和页眉+页脚的div：

<div>
      <div>Header</div>
      <div>Article 1</div>
      <div>Article 2</div>
      <div>Article 3</div>
      <div>Footer</div>
    </div>

首先，我们需要将容器设置为网格并在单元格之间添加一点间隙：

.container {
      display: grid;
      grid-gap: 10px;
    }

最重要的部分是定义实际网格。如果我们将此布局放在 Excell 表中，它将如下所示：

![dcf2a0345ccb69e1483118b582745586.png][]

可以使用以下grid-template-areas属性将其转换为 CSS ：

.container {
     grid-template-areas: 
        "h  h  h"
        "a1 a2 a3"
        "f  f  f"; 
      display: grid;
      grid-gap: 10px;
    }

现在要将 html 元素放置在相应的 CSS 网格单元中，我们可以使用grid-areaprop：

.header { grid-area: h; }
    .art.first { grid-area: a1; }
    .art.second { grid-area: a2; }
    .art.third { grid-area: a3; }
    .footer { grid-area: f; }

#### 使 CSS 网格具有响应性 ####

为了使这个响应式，我们可以更改表格布局：

![a3f89067056584d65c08f4f5d3e992a4.png][]

所以一次又一次的媒体查询来grid-template-areas拯救。

@media only screen and (max-width: 600px) {
      .container {
        grid-template-areas: 
            "h"
            "a1"
            "a2"
            "a3"
            "f";
      }
    }

我们也可以使用display:block，但这个想法只是为了展示grid-template-areas管理我们的布局配置是多么灵活和有用。

#  #

**学习更多技能**

**请点击下方公众号**

![8f3579f9b174ea7bc55db4a923649d63.gif][]

[b7d028e836ab748d3c3fd1ed79f3410e.png]: /images/20220828/dc34593c20b34f33bedd8696b8aeb51c.png
[59e156d56bd051c5c1bf4016ad150274.png]: /images/20220828/fc025f27e5d343eb962058a188466f13.png
[dcf2a0345ccb69e1483118b582745586.png]: /images/20220828/5d6d6c1c58e74380bd5e150cb57d6093.png
[a3f89067056584d65c08f4f5d3e992a4.png]: /images/20220828/f31bce5902ff4ab89af6ceb1502c88e1.png
[8f3579f9b174ea7bc55db4a923649d63.gif]: /images/20220828/63d5845285524dc8a729082799a83ce4.png