前言

在CSS开发过程中，我使用过表格布局、浮动布局和弹性布局flex,很多人都说目前最强的布局方案是Grid布局，自己之前也接触过，但是大部分还是使用flex,故需要总结记录一下Grid,方便以后学会和使用。

什么是Grid布局

Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。

和flex布局的区别

Grid布局和flex布局是有实质性的区别的，flex是一维布局，只能处理一个维度上的布局，一行或者是一列。但是Grid布局是二维布局 ，将容器划分成了“行”和“列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。

基本概念

容器和项目

采用网格布局的区域，称为”容器”（container）。容器内部采用网格定位的子元素，称为”项目”（item）

1
2
3
4
5
<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

上面代码中，最外层的<div>元素就是容器，内层的三个<div>元素就是项目。

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid布局只对项目生效。

行和列

容器里面的水平区域称为”行”（row），垂直区域称为”列”（column）。