Grid布局使用方法

Grid布局就是网格布局

CSS网格布局是CSS中功能最强大的布局系统。它是一个二维系统，这意味着它既可以处理列又可以处理行

第一步：

首先先将父容器定义为网格容器,块级网格grid,或者定义为内联网格inline-grid;

    .container{
        display:grid | inline-grid;
    }

Grid网格布局的原理就是把一一块区域用行和列分割成几个小的区域，就像网格一样（或者理解为象棋棋盘的布局）

第二步：分割

在父容器内将区域分成几行和几列

.container{
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows:25% 100px auto;
}

column是列，将父容器分成5列，每列的宽度分别是40px,50px,自适应，50px,40px, row是行，每一行的高度是：占比父容器的25%，100px ,自适应剩下的

第三步：使用

使用方式一：

这样就将网页分割成一个网格，有行和列，使用这些网格时就，按照从第几行到第几行；从第几列到第几列划分区域

比如说我想在红线区域设置轮播图 a

就是从第1行到第3三行；从第2列到第5列

.a{
    grid-row-start:1；
    grid-row-end:3;
    grid-column-start:2;
    grid-column-end:5;
}

方法二：使用grid-template-area:

就是在父容器里给每个区域起一个名字，然后再指定给子盒子。

还以上边轮播图的案例:绿色的是名字

.container{
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows:25% 100px auto;
    grid-template-area:
        "s img img img d"
        "m img img img d"
        "pic pic y  y  d";
}

这样就给每个方框起了名字，在使用时指定,所有名字为img的方框都成为了轮播图的区域，在里面放置图片，会铺满整个img框

.a{
    grid-are:img;
}

这只是粗略的用法，详细的可以看官网：css之Grid网格布局

也可以玩这个网格布局的小游戏：grid网格布局小游戏 可以帮助你快速地掌握grid网格布局