只用3个属性制作一个响应式CSS网格布局

好购网GoodMai如果我告诉你，你只需要知道3个CSS属性就可以制作一个完全响应式CSS网格，如下：让我们从html布局开始。文章和页眉+页脚对应的容器和div：●●●●●●●

首先，我们需要将容器设置为网格，并在单元格之间添加一点间隙：●●●●container{display:grid;grid-gap:10px;}最重要的部分是定义实际的网格。如果我们把这个布局放在Excell表格中，它看起来像这样：它可以使用以下网格模板区域属性转换为CSS：●●●●●●●●.container{grid-template-areas:"hhh""a1a2a3""fff"；display:grid;grid-gap:10px;}现在要将html元素放置在相应的CSS网格单元格中，我们可以使用grid-areaprop:●●●●●。header{网格区域：h;}.art.first{网格区域：a1；}.art.second{网格区域：a2；}.art.third{网格区域：a3；}.footer{grid-area:f;}使CSSGrid具有响应性为了使其具有响应性，我们可以更改表格布局：因此一次又一次地对grid-template-areas进行媒体查询以进行救援。●●●●●●●●●●@mediaonlyscreenand(max-width:600px){.container{grid-template-areas:"h""a1""a2""a3""f";我们也可以使用display:block，但这个想法只是为了展示grid-template-areas在管理我们的布局配置方面是多么灵活和有用。Goodmai（www.goodmai.com）IT技术交易平台