CSS—Grid布局之基本概念

目录

一、Grid布局与Flex布局

二、Grid布局的概念

---

一、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。