目录
一、Grid布局与Flex布局
如上图所示,Grid布局可以很轻松的实现这种布局。Grid网格布局是最强的CSS布局方案,它可以将网页划分成一个个网格,任意组合不同的网格,做出各种各样的布局。
Grid布局是CSS中一种新的布局方式,对盒子和盒子内的位置及尺寸有很强的控制能力。Flex布局是轴线布局,只能指定项目针对轴线的位置,可以理解为一维布局。Grid布局则是将容器划分成行和列,产生单元格,然后指定项目所在的单元格,可以理解为二维布局。Grid布局远比Flex布局强大。
二、Grid布局的概念
容器和项目
采用网格布局的元素称为容器,容器内部使用网格定位的子元素称为项目。
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
如上代码所示,最外层的div就是容器,内层的三个div子元素是项目。项目只能是容器的顶层子元素,不包含项目的子元素,比如上述代码中的p元素就不是项目。Grid布局只对项目生效。
行和列、单元格
容器里面的水平区域称为行,垂直区域称为列。行和列的交叉区域,称为单元格。正常情况下,n行m列共有单元格nm个,比如3行3列共有9个单元格。
网格线
划分网格的线称为网格线。水平网格线划分出行,垂直网格线划分出列。正常情况下,水平网格线比行数多1,垂直网格线比列数多1。