共计 862 个字符，预计需要花费 3 分钟才能阅读完成。
好买网 GoodMai
如果我通知你，你只须要晓得 3 个 css 属性就能够制作一个齐全响应式的 css 网格，如下所示：
让咱们从 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 表中，它将如下所示：
能够应用以下 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 网格具备响应性
为了使这个响应式，咱们能够更改表格布局：
所以一次又一次的媒体查问来 grid-template-areas 援救。
●
●
●
●
●
●
●
●
●
●
@media only screen and (max-width: 600px) {.container {grid-template-areas: “h””a1″”a2″”a3″”f”;}}
咱们也能够应用 display:block，但这个想法只是为了展现 grid-template-areas 治理咱们的布局配置是如许灵便和有用。
好买网（www.goodmai.com）IT 技术交易平台