1、什么是Grid布局
Grid
布局即网格布局,是一种新的
css
模型,一般是将一个页面划分成几个主要的区域,定义这些区域的大小、位置和层次等关系,是目前唯一一种
css
二维布局。
2、和
flex
布局的区别
Grid
布局和
flex
布局是有实质性的区别的,
flex
是一维布局,只能处理一个维度上的布局,一行或者是一列。但是
Grid
布局是二维布局 ,将容器划分成了“行”和“列”,产生了一个个的网格,可以将网格元素放在行和列相关的位置上,从而达到了布局的目的。
flex
布局示例:
Grid
布局示例:
3、
Grid
布局的概念
首先我们先看一个小例子,通过这个例子演示一些基础概念
<divclass="wrapper"><divclass="one item">One</div><divclass="two item">Two</div><divclass="three item">Three</div><divclass="four item">Four</div><divclass="five item">Five</div><divclass="six item">Six</div>
.wrapper{margin: 60px;/* 声明一个容器 */display: grid;/* 声明列的宽度,数字3表示的重复3次,即有3列宽度为200px*/grid-template-columns:repeat(3,200px);/* 声明行间距和列间距 */grid-gap: 20px;/* 分别表示两行的高度 */grid-template-rows: 100px 200px;}.item{text-align: center;font-size: 200%;color: #fff;}.one{background-color:#b8e8e0 ;}.two{background-color: #8CC7B5;}.three{background-color:#efe3bf ;}.four{background-color: #BEE7E9;}.five{background-color: #E6CEAC;}.six{background-color: #ECAD9E;}
运行结果:
- 容器和项目我们通过在元素上声明
display:grid
或者display:inline-grid
来创建一个网格容器,这个元素的所有直系子元素将成为网格项目。 - 网格轨道
grid-template-columns
和
grid-template-rows
属性来定义网格中的行和列
- 网格单元
一个网格单元是在一个网格元素中最小的单位,上图中
One
、
Two
、
Three
、
Four
…都是一个个的网格单元
- 网格线划分网格的线即为网格线。需要注意的是,我们定义网格的时候,定义的是网格轨道。Grid会自动创建编号的网格线来定位每一个元素,m 列有 m + 1 根垂直的网格线,n 行有 n + 1 跟水平网格线。一般而言,是从左到右,从上到下,1,2,3 进行编号排序,从右到左,从下到上,则是按照 -1,-2,-3…顺序进行编号排序
版权归原作者 芋圆不想 圆 所有, 如有侵权,请联系我们删除。