.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
//
grid-template-areas: 'a a a'
'b b b'
'c c c';
//
grid-template-areas: "header header header"
"main main sidebar"
"footer footer footer";
一、概述
上面的效果,就是Grid布局的拿手好戏。
Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。 Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。
二、基本概念
学习 Grid 布局之前,需要了解一些基本概念。
2.1 容器和项目
采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)。
上面代码中,最外层的
注意:项目只能是容器的顶层子元素,不包含项目的子元素,比如上面代码的
元素就不是项目。Grid 布局只对项目生效。
容器使用
ddisplay: grid;
指定布局。接着就应该划分行和列,grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。
若数值相同,可使用
repeat
关键字单元格宽度固定,若容器宽度不固定,让其自适应可使用
auto-fill
关键字。使用
fr
关键字,按相对比例拆分。设置行列间距![image](https://user-images.githubusercontent.com/30516060/84568106-d0ab7100-adaf-11ea-9f89-2c5e49641845.png)
根据最新标准,上面三个属性名的grid-前缀已经删除,grid-column-gap和grid-row-gap写成column-gap和row-gap,grid-gap写成gap。
grid-template-areas 属性指定区域,实现非顺序容器布局。
如果某些区域不需要利用,则使用"点"(.)表示。
grid-auto-flow: column; 行列转置
未完待续
Grid布局