超强Grid网格布局入门

简介

什么是grid网格布局，望文生义，将页面分成一个一个网格状的布局方式称为网格布局，它是目前css布局中最为强大的布局，学会网格布局，将会大幅度减少写css的量，配合vue的组件化开发，将使我们的开发效率更上一层楼。（ps:部分浏览器存在兼容性问题，使用请按需求来）

本文参考了阮一峰老师的博文，阮一峰老师写的非常通俗易懂，本打算直接附上链接供大家自行学习，但是想着写一写博文，有助于自己理解得更透彻，因此还是决定写下这篇博客，文末附上链接，不愿看我写的小伙伴可以直接右边目录跳转至参考资料🤪

基本概念

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。学习grid布局前，先了解以下概念，助于理解学习😄

容器和项目

采用网格布局的区域称为容器，容器内部顶层子元素称为项目

<div style="display:grid">
  <div><p></p></div>
  <div><p></p></div>
  <div><p></p></div>
</div>

如上所示，采用了grid布局的div称为容器container，其项目为容器内顶层子元素div，<p>不是顶层子元素，因此不属于该容器的项目item，故display:grid属性不会对<p></p>标签生效

网格线

划分网格的线，称为”网格线”（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

如上图所示是一个4行x4列的网格布局，那么它的网格线就有(4+1)根横向网格线，(4+1)根纵向网格线

行和列

容器里头的水平区域称为行row,垂直区域称为列column
结合上面网格线内容，可以得出，n条横/纵网格线生成n-1行/列

如上所示：水平的深色区域就是”行”，垂直的深色区域就是”列”。

单元格

行与列交叉形成单元格(cell)
正常情况下n行m列会形成n × m个单元格
如上图网格线内容所示4行4列则形成16个单元格

容器属性和项目属性

Grid布局的属性分为两类,一类是定义在容器上的属性称为容器属性，另一类则是定义在项目上的属性称为项目属性。这一块的知识点建议大家先理解透了上面基础概念,再边看阮老师的博文，边敲代码，这样有助于对属性的作用理解的更透彻,博主这边只对属性做个整理。

容器属性

对采用Grid网格布局的整个大容器生效的属性

div{
    display: grid;  //设为网格布局（可选inline-grid）
    grid-template-columns:120px 120px 120px; //设置列宽 可用百分比/fr/repet()函数，具体看阮老师博客
    grid-template-rows:150px 150px 150px; //设置行高 可用百分比/fr/repet()函数，具体看阮老师博客
    row-gap: 20px; //设置行间距
    column-gap: 20px; //设置列间距
    <!-- gap:20px; //同时设置行列间距 -->
    grid-template-areas: 'a b c'
                       'd e f'
                       'g h i'; //区域属性，这块功能强烈建议看阮老师博客，将区域定为9个命名单元格
    grid-auto-flow:row; //项目排列顺序默认row表示先行后列，先横向再纵向，可选值：column
    justify-items: start | end | center | stretch; //设置单元格内容的水平位置（左中右）
    align-items: start | end | center | stretch; //属性设置单元格内容的垂直位置（上中下）。
    <!-- place-items: start end; //以上两属性合并简写 -->
    //整个内容区域在容器里面的水平位置（左中右）
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
    //整个内容区域在容器里面的垂直位置（上中下）
    align-content: start | end | center | stretch | space-around | space-between | space-evenly;
    <!-- place-content: space-around space-evenly; //以上两属性合并简写  -->
    grid-auto-rows: 50px; //grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
}

注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

项目属性

顾名思义，只对容器内单个项目item生效的属性

div .item1{
    grid-column-start: 1; //左边框所在的垂直网格线
    grid-column-end: 3; //右边框所在的垂直网格线
    grid-row-start: 2; //上边框所在的水平网格线
    grid-row-end: 4; //下边框所在的水平网格线
    <!-- grid-column -->
    <!-- grid-row   -->
    <!-- 以上合并简写形式  -->

    grid-area:a; //属性指定项目放在哪一个区域。和容器属性grid-template-areas搭配使用

    justify-self: start | end | center | stretch; //属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
    align-self: start | end | center | stretch; //属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
    <!-- place-self: center center;//以上两属性合并简写 -->
}

(本文完结，感谢阅读)

参考资料

1. 阮一峰老师grid布局教程 ↩
2. MDN上的grid布局 ↩