前端Grid布局介绍

1. 什么是Grid布局
Grid布局及网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。
2. 和flex布局的区别
Grig布局和flex布局时有实质性的区别的，flex是一维布局，只能处理一个维度上的布局，一行或者是一列，但是Grid布局是二维布局，将容器划分成了“行”和”列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。
flex布局示例：

grid布局示例：

3. grid布局的概念
首先我们先看一个小例子，通过这个例子演示一些基础概念