一、为什么选择grid

我相信大多数同学在前端开发中都使用过flex布局，flex是一个强大的布局工具，对于横向或纵向排布的布局拥有较强的布局能力，但是如果有网格布局的需求的时候（尤其是不规则的网格布局），flex就略显乏力了，这时grid就派上用场。

二、基本知识

在grid布局中，水平区域被称为行，垂直区域被称为列，例如n行m列就会产生n*m个单元格，并有n+1条水平网格线和m+1条垂直网格线。

通过gird-template-colums和gird-template-rows来指定列宽与行高。

grid-template-columns: 100px 100px 100px;

grid-template-rows: 100px 100px 100px;

当然我们也可以使用百分比的方式来指定，这样更加的灵活，如果出现重复的值，我们也可以使用css的内置函数repeat（）

通过gap来指定间距如：

grid-row-gap：20px; grid-column-gap: 20px

不过在之前进行项目开发的时候偶然发现此属性已经废弃，现在官方更推荐你使用gap

与flex布局一样，grid布局也分为容器属性与项目属性

我们可以通过justify-items来设置单元格内容的水平位置，align-items来设置垂直位置，这点与flex布局十分相似

justify-content 与 align-content是设置整个内容区域在容器中的位置

grid-column-start 属性 grid-column-end 属性 grid-row-start 属性 grid-row-end 属性

这四个属性代表左、右、上、下边框所在的水平网格线，通过对这四个属性的设定可以指定项目在网格线的位置，从而对项目进行布局

例如： grid-column-start: 2; grid-column-end: 4;

代表：1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。

还有部分零零碎碎的属性，因为使用频率不高，就在这里不再赘述啦。

通过今天的学习，让我对css的基础掌握更牢固了，目前，以flex、grid为主流的布局方案已经替代了传统的浮动+加定位的布局，因此大家在平时的开发中，要多使用flex和grid布局，提高自己代码的书写质量以及可读性