CSS3 网格布局 (十)
标签(空格分隔): 前端学习
网格是由一系列水平及垂直的线构成的一种布局模式,可以帮助我们设计一些列具有固定位置以及宽度的元素的页面。
定义一个网格
要将容器定义为网格布局,要设置.app{display: grid}
,此代码创建了一个只有一列的网格,即子项还是会想正常布局流一样从上向下排布,再在.app
中添加grid-template-columns: num num num
此时就定义的一个三列的网格。
使用fr来灵活的定义网格
使用fr
灵活定义网格与普通定义不同的地方:grid-template-columns: 1fr 2fr 1fr
,即定义了长度比为1:2:1的网格,另外,fr
可以与有一般的长度单位混合使用,例如:grid-template-columns: 300px 1fr 2fr
,那么第一列宽度就是300px,剩下两列会根据去掉300px后的可用空间按比例分配
要注意的是,fr
单位分配的是可用空间而非所有空间,可用空间是不包括哪些已经被占用的空间的
网格间隙
使用grid-column-gap
属性来定义列间隙,使用grid-row-gap
来定义行间隙,使用grid-gap
可以同时定义两者
要注意的是,间隙距离可以用任何长度单位包括百分号表示,但是不可以使用fr
单位
重复构建行列
可以使用repeat
来重复构建具有描写宽度配置的列,例如:
.app {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 20px;
}
上述代码重复创建了3个列
显式网格和隐式网格
显式网格是我们用grid-template-columns
或grid-template-rows
属性创建的,而隐式网格则是当有内容放到网格外时才会生成的。
隐式网格中生成的行/列大小默认是auto
,大小会根据放入的内容自动调整,当然也可使用grid-auto-rows
和grid-auto-columns
属性手动设定隐式网格的大小
方便的minmax()函数
minmax
函数为一个行/列的尺寸设置了取值范围。比如:minmax(100px,auto)
那么尺寸至少为100像素,当内容超过100像素时会根据内容自动调整。例如:
.app {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-auto-rows: minmax(100px,auto);
grid-gap: 20px;
}
minmax
函数可以作用与隐式网格也可以作用与显式网格
基于线的元素的放置
可以根据以下分隔线来放置元素:
grid-columns-start
grid-columns-end
grid-row-start
grid-row-end
也可使用以下缩写来同时指定开始于结束的线:grid-column
grid-row
例如:grid-row: 1 / 3; grid-columns: 1;
即使放置在第一列一到三行
注意:
article {
background-color: blueviolet;
grid-row: 2;
grid-column: 2 / 3;
}
aside {
background-color: burlywood;
grid-row: 2;
grid-column: 1 / 2;
}
<!--上述代码中article占据第二和第三列,而aside占据第一列-->
要注意的是开始与结束的线的序号要使用/
符号隔开
值得注意的是在显式网格中,可以使用-1
来定位到最后一条列分隔线或是行分隔线,并且可以用负数来指定倒数的某一条分隔线。
使用grid-template-areas
属性放置元素
#app {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 1fr 3fr;
gap: 20px;
}
header {
grid-area: header;
}
article {
grid-area: content;
}
aside {
grid-area: sidebar;
}
footer {
grid-area: footer;
}
grid-template-areas
属性的使用规则:
- 需要填满网格的每个格子
- 对于某个横跨多个格子的元素,重复写上那个元素的
grid-area
属性定义的区域名 - 所有名字只能出现在一个连续的区域,不能再不同的位置出现
- 一个连续的区域必须是一个矩形
- 使用
.
符号,让一个格子留空