深入了解css中的grid布局

只说概念可能理解的慢，我们通过做一个小布局，把Gird相关的知识点总结一下。保证你看完之后，grid布局也就学的差不多了。

先看看我们的第一个小例子最终的效果图：

下面是我们的HTML代码

<div class="wrap">
    <header class="title">title</header>
    <nav class="aside">aside</nav>
    <div class="nav">nav</div>
    <div class="main">main</div>
    <footer class="footer">footer</footer>
</div>

然后看我们的CSS代码

    <style>
        .wrap{
            margin: 0 auto;
            display:grid;
            width:600px;
            grid-template-columns:1fr 3fr 1fr ;
            grid-template-rows:80px 220px 80px;
            grid-gap:5px;
            color:#fff;
        }
        .title{background:red; grid-column:1/3;}
        .aside{background:#e15671;grid-column:3/4; grid-row:1/span 2;}
        .nav{background:#e15671;}
        .main{background:#033333;}

        .footer{background:#e15671; grid-column:1/4;}

    </style>

HTML代码就不再分析了，主要分析CSS代码

第一步、首先在整个容器中我们用了display:grid;对容器声明一个网格容器，那么这个容器元素里面对应的子元素自动成为网格项目

补充知识点：CSS中声明网格布局通过给某个容器设置display:grid、display:inline-grid、display:subgrid三种方法任选其一。同时这个容器就被称为网格容器，而这个容器的子元素就称为网格项目。

第二步：设定了网格的列数和行数，以及列和行的间距

            grid-template-columns:1fr 3fr 1fr ;
            grid-template-rows:80px 220px 80px;
            grid-gap:5px;

补充知识点

• grid-template-columns：用来给网格指定列数和列宽
• grid-template-rows：用来给网格指定行数和行高
• grid-gap：单元格之间的距离
• fr：可以自动根据网格容器的宽度来计算列的宽度。（fr单位是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。）

然后看上面的代码：grid-template-columns:1fr 3fr  1fr;就是把整个网格分为三列，第一列和第三列的宽度是1fr，第二列的宽度是3fr。（具体的大小是自动根据容器的宽度计算的）。grid-template-rows:80px 220px 80px ;就是设置网格的第一行和第三行的高度是80px，第二行的高度是220px。所以我们设置了一个3*3的网格布局（3行3列）。这种方式创建的是一种显式的网格线。

其实如果没有下面的代码，只是上面的css样式，现在的布局是这样的

那么我们想要让顶部的第一行尽可能的宽，比如说跨整个网格列的3/5，要怎么做呢？其实很简单，只需要用到grid-colmun:1/3。嗯、怎么理解，且听我继续分解

第三步：让title跨这个网格的3/5

关键的代码是：grid-column:1/3;其中第一个数字是列的起始网格线位置，第二个数字是线束网格线的位置。嗯、grid-column是什么，网格线又是什么？请看下面的知识点补充

补充知识：为了要设置网格容器内的项目（网格项目）位置，需要使用到网格布局属性，网格布局属性主要包括

grid-column-start:设置网格项目垂直方向的开始位置网格线

grid-column-end:设置网格项目垂直方向的结束位置网格线

grid-row-start:设置网格项目水平方向的开始位置网格线

grid-row-end:设置网格项目水平方向的结束位置网格线

这几个值有缩写的方式：

grid-column:是grid-column-start和grid-column-end两个属性的缩写方式

grid-row:是grid-row-start和grid-row-end两个属性的缩写方式。

grid-area：是这四个属性的缩写方式grid-row-start/grid-column-start/grid-row-end/grid-column-end

上面提到了网格线，那么什么是网格线呢？我们来看一个图，就都知道了

网格线：是用来在水平和垂直方向分割网格的线，水平方向的网格线是从左向右，垂直方向的网格线是从上往下，网格线的编号都是从1开始的。如下图所示（图是在网上找到，但也和我们的差不多，知识宽度有点不一样，理解理解，最重要的是理解嘛。）我们上面创建的是一个3*3的网格布局，下面的是一个3*2（3列2行）的网格布局。

所以我们上面的grid-column:1/3;意思就是从1开始到3结束，加上这句代码之后我们的效果就变成下面的样子了

footer的效果和这个差不多，所以我们也就直接加上了这句代码哦！

其实想要达到上面的效果并不是只有上面的一种方法，我们都知道单元格合并吧，其实这也是可以通过合并达到上面的效果的。那就是在 grid-column 或者 grid-row 中引入关键词 span ，在关键词 span 后面紧跟一个数值，就是表示合并单元格的数量

下面我们来看具体的代码

        .title{background:red; grid-column:1/span 2;}

        .footer{background:#e15671; grid-column:1/span 3;}

grid-column:1/span 2;表示从列网格线 1开始，跨度是 2个列网格线（其实就是合并两个列单元格）。同理：grid-column:1/span 3;就是从列网格线1开始，跨度是3个列网格线（其实就是合并三个列单元格）

第四步就是让aside占据剩下的位置

看到这里，你会不会想，这有啥难的，直接grid-row:1/3或者grid-row:1/span 2就可以了，非也非也，为什么呢？

上面我们通过grid-template-columns和grid-template-rows声明了网格区域，但我们并没明确指定每个网格项目的具体位置，所以网格项目是通过自动定位算法来自动放置到网格容器的未占用空间中。所以当我们只给aside设置grid-row:1/3或者grid-row:1/span 2时，默认设置的grid-column：1/1;然后结果肯定和我们想要的不一样（当然如果aside在默认网格中的最右侧，这样设置是没问题的），所以此时就需要我们把grid-column:3/4加上，这样就确定了网格区域，也就不会出错了。看下面的代码：

 .aside{background:#e15671;grid-column:3/4; grid-row:1/span 2;}

然后就可以得到我们想要的布局了，这里不再附图，上面第一个图就是的

补充知识点：

row：自动布局算法把网格项按顺序填充到每一行，必要时添加新行。这是grid-auto-flow的缺省值。

column：自动布局算法把网格项按顺序填充到每一列，必要时添加新列。

dense：如果指定了dense，将使用“密集”填充算法，它试图把排在后面的体积小的网格项填充到“大个头”网格留下的空隙中，这有可能导致填充顺序和代码顺序不同。如果未指定，则将使用“稀疏”填充算法，只是按顺序拜访，不回溯填充。这可以确保所有网格项保持原有的代码顺序。但有可能会出现页面空间浪费。

接下来我们在这个项目的基础上进行 一个小小的扩展。当然主要是补充一下跟grid相关的知识点喽！

1、假设我们不想让main占满，我们设置了main的宽和高分别为100px，然后我们希望它可以在它所在的网格中垂直居中显示，那么我们就需要用到align-self:center，看效果图吧

然后如果们也想要它在水平方向上面也是居中的，那我们怎么做呢？其实也很简单，就是：justify-self:center;就可以喽，附上效果图

关于水平和垂直居中的详细讲解，我是看的https://drafts.csswg.org/css-align-3/。英语好的又想要深入了解 Box Alignment 可以去上面的链接地址看看，嗯、英语不好的就不要进去找虐了，将就着看看我下面写的。

align-self：start/center/end

justify-self:start/center/end

当然不止这三个值，我只是把常用的三个列了出来（毕竟英语一般，不敢随便翻译）。

当然时间有限，篇幅有限，grid也不是一个一两句话就可以表述清晰的，所以本博涉及的知识点也有限（把主要的，经常用到的拿出来了）如果想要了解更多的推荐看看下面的几篇文章（好东西就是要分享出来大家一起学习一起进步，一起变的更好）

• CSS Grid布局：图解网格布局中术语之一
• CSS Grid布局：图解网格布局中术语二
• CSS Grid布局：图解网格布局中术语三
• CSS Grid布局指南