GRID布局
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局
Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。
grid布局预热
- 容器和项目
<
- 行和列
容器里面的水平区域称为"行",垂直区域称为"列"。
- 单元格
行和列的交叉区域,称为"单元格"。
- 网格线
划分网格的线,称为"网格线"。水平网格线划分出行,垂直网格线划分出列。
GRID属性
容器属性:添加在容器元素
1、启动网格布局
display
2、划分行和列
grid-template-columns
-
- 属性值:绝对大小(根据列数或者行数确定值的个数) 例:200px 200px 200px
grid-template-columns
-
- 属性值:百分比(根据列数或者行数确定值的个数) 例:33.33% 33.33% 33.33%
grid-template-columns
-
- 功能函数:repeat()
repeat
-
- auto-fill关键字( 自动填充 )
grid-template-columns
- fr关键字(列宽片段)
为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。
grid-template-columns
-
- minmax() 功能函数
grid-template-columns
-
- auto 关键字 自动填充
grid-template-columns
-
- 网格线名称
grid-template-columns
3、设置行间距 || 列间距
grid-row-gap
- 指定"区域"(area),一个区域由单个或多个单元格组成。
display
display:grid;
grid-template-columns:repeat(3,100px);
grid-template-rows:repeat(3,100px);
grid-template-areas: 'a a a'
'. . b'
'. c c';
5、规划子元素放置的顺序(默认为先排行后排列)
grid-auto-flow
6、设置单元格内容在单元格内 水平 | 垂直 的对齐方式
justify-items
7、设置整个内容区域在容器里面的水平 | 垂直 对齐方式
justify-content
项目属性:添加在子元素上面
- 指定项目的四个边框,分别定位在哪根网格线。
grid-column-start
grid-column-start:1;
grid-column-end:3;
grid-row-start: 2;
grid-row-end:4;
2、grid-column , grid-row
grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
grid-column: 1 / 3;
grid-row: 1 / 2;