使用 CSS3 Grid Layout 实现自适应布局

CSS Grid Layout 是 CSS 中非常强大的布局系统，与 flexbox 很相似。但 flexbox 主要针对一维布局， grid layout 能够很好的作用于二维布局。
本文将使用 grid layout 的若干属性来创建一个自适应布局，体会一下在屏幕适配方面 grid layout 给我们带来的便携。
如果你还没有学习或接触过 gird layout ，可以先通过这篇文章来学习一下。

1、HTML结构

<div class="container">
    <div class="header">Header</div>
    <div class="slider">Slider</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

最外围通过一个容器包裹，之后会通过 CSS 将它设置成一个网格容器。其中的子元素称为网格项。
Grid Layout 有个尤为显著的特点：网格容器中的网格项排布，与实际 HTML 结构无关。flexbox 也拥有一样的特性，这种特性为自适应布局提供了很好的支持。

2、CSS设置

container 网格容器设置

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 80px 500px 80px;
    grid-gap: 10px;
    grid-template-areas:     
    "h h h h h h h h h h h h" 
    "s s s c c c c c c c c c" 
    "f f f f f f f f f f f f";
}

display 将 div 变成网格容器。
grid-template-columns 和 grid-template-rows 指定了行列的排布， repeat函数的作用是将1fr 重复12次，即将列进行12等分。
gird-gap 设置了网格项之间的间隙。
grid-template-areas 是自适应布局的关键，首先将每个网格项命名，再将网格项的排布通过上面这种写法表示出来。

网格项的设置

.container .header {
    grid-area: h;
    background: burlywood;
}
.container .footer {
    grid-area: f;
    background: aquamarine;
}
.container .slider {
    grid-area: s;
    background: rebeccapurple;
}
.container .content {
    grid-area: c;
    background: green;
}

grid-area 用来给每个网格项命名

3、屏幕自适应

grid-template-areas 是实现自适应布局的关键，网格项的布局是通过它来指定的，所以实现屏幕自适应的思路就是，通过 CSS3 媒体查询，在屏幕大小发生变化的时候来改编 grid-template-areas 的值。

@media screen and (max-width: 800px) {
    .container{
        grid-template-areas: 
        "h h h h h h s s s s s s" 
        "c c c c c c c c c c c c" 
        "f f f f f f f f f f f f";
    }
}
@media screen and (max-width:500px) {
    .slider{
        display: none;
    }
    .container{
        grid-template-areas: 
        "h h h h h h h h h h h h" 
        "c c c c c c c c c c c c" 
        "f f f f f f f f f f f f";
    }
}