GRID布局
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局
Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。

grid布局预热
- 容器和项目
<- 行和列

容器里面的水平区域称为"行",垂直区域称为"列"。
- 单元格

行和列的交叉区域,称为"单元格"。
- 网格线

划分网格的线,称为"网格线"。水平网格线划分出行,垂直网格线划分出列。
GRID属性
容器属性:添加在容器元素
1、启动网格布局
display2、划分行和列
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-columns3、设置行间距 || 列间距
grid-row-gap
- 指定"区域"(area),一个区域由单个或多个单元格组成。
displaydisplay: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-flow6、设置单元格内容在单元格内 水平 | 垂直 的对齐方式
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;
本文详细解析了Grid布局与Flex布局的区别,讲解了Grid布局如何通过行、列、单元格和网格线实现二维布局,并介绍了关键属性如`grid-template-columns`和项目属性`grid-column-start`。
1295

被折叠的 条评论
为什么被折叠?



