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

讓我們從 html 布局開始。只是一個容器和對應(yīng)于文章和頁眉+頁腳的div：

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

首先，我們需要將容器設(shè)置為網(wǎng)格并在單元格之間添加一點間隙：

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

最重要的部分是定義實際網(wǎng)格。如果我們將此布局放在 Excell 表中，它將如下所示：

可以使用以下grid-template-areas屬性將其轉(zhuǎn)換為 CSS ：

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

現(xiàn)在要將 html 元素放置在相應(yīng)的 CSS 網(wǎng)格單元中，我們可以使用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 網(wǎng)格具有響應(yīng)性

為了使這個響應(yīng)式，我們可以更改表格布局：

所以一次又一次的媒體查詢來grid-template-areas拯救。

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

我們也可以使用display:block，但這個想法只是為了展示grid-template-areas管理我們的布局配置是多么靈活和有用。

學(xué)習(xí)更多技能

請點擊下方公眾號