Grid布局简单上手

1.什么是grid布局？

网格布局、将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以将它看成二维布局。

个人理解：

传统布局(position、float等)：兼容效果最好，效率较低。

flex布局： 兼容性强，基于行和列的布局，可以看成一维布局。

grid布局：基于二维布局，适用于页面大块的搭建，十分便于操作。

2.设置gird布局：

display：grid // 制定一个容器为grid布局，容器元素为块级元素

dispaly：inline-grid // 容器元素为内联块

3.grid布局两种实现思路

grid-template-columns                      // 定义每一列的列宽

grid-template-rows                            // 定义每一行的行高

1.grid-column-start  +grid-row-start 等 设置单元格位置

使用grid-template-columns+grid-template-rows  划分单元格后，在每个单元格的css中设置网格线开始结束位置。

基本属性：

grid-column-start                               // 左边框所在的垂直网格线

grid-column-end                                //右边框所在的垂直网格线

grid-row-start                                     //上边框所在的水平网格线

grid-row-end                                       //下边框所在的水平网格线

grid-row-gap                                        //设置行与行的间隔（行间距）

grid-column-gap                                   //设置列与列的间隔（列间距）

2.grid-area+grid-template-areas  将每一个项目、单元写出来

使用grid-template-columns+grid-template-rows  划分单元格后，在使用grid布局容器中，写出每个容器的位置。

grid-are                                                 //指定项目放在哪一个区域

grid-template-areas                              //网格布局允许指定"区域"（area），一个区域由单个                                                               //或多个单元格组成

. 代表空

3.实现九宫格

grid-template-columns +grid-template-rows

4.其他

gird布局文档： CSS Grid 网格布局教程 - 阮一峰的网络日志

开发时可以使用，属性查询起来用很方便

grid布局游戏：Grid Garden - A game for learning CSS grid layout

grid布局上手并不难，创建一个html文件敲一下，更容易理解属性。