网格布局的概念,和fex布局的区别
含义:
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局
区别:Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。
Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局.
网格布局案例: 不规则布局页面(win窗口)
概念: 容器,项目,行,列,单元格,网格线
网格布局中的属性
含义: 网格布局中的属性和flex中的布局属性类似,分为了两类,一类容器属性;
一类是项目属性
容器属性
1、触发网格布局
给父元素添加display::grid
display关于网格的取值分为两个,grid(块网格)和inline-grid(行内网格,行内块)
grid===容器从上向下排列
inline-grid===容器从左向右排列
2、行列划分
规定行属性: grid-template-row:
固定列属性: grid-template-column:
日有卖
代专的早名小
多小列
1)绝对大小(根据列数或者行数确定值的个数)
例: 200px 200px 200px
grid-template-columns:200px 200px 200px
grid-tempTate-rows:200px 200px 200px
2)百分比 (根据列数或者行数确定值的个数)
例: 33.33% 33.33% 33.33%
grid-template-columns: 33.33% 33.33% 33.33%
grid-template-rows : 33.33% 33.33% 33 .33%
行和列宽
度高度
33.33%
3)功能函数: repeat(0)
repeat(参数1,参数2)
重复的次数
重复的数值或者重复的模式
eg:
grid-template-columns : repeat (3,33.33%) :
等同
grid-template-columns :33 .33% 3333% 33.33%
4)auto-fill关键字( 自动填充配合功能函数使用
grid-tempate-columns: repeat(auto-fi11,33.33%):
当项目宽高固定,容器不固定的情况下,自动填充网格列数
5)fr关键字(列宽片段)
为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为
1fr和2fr,就表示后者是前者的两倍。
grid-template-columns:1fr 3fr 1fr :
grid-template-rows:repeat(3,100px):
6)minmax() 功能函数
grid-template-columns: 1fr 1fr minmax(100px,1fr);
minmax(100px,1fr)表示列宽不小于100px,不大于1fr
7)auto 关键字 自动填充