前端之Grid布局
网格
CSS网格是一个用于web的二维布局系统.
可以把内容按照行与列的格式进行排版.
网格布局
网格是由一系列水平及垂直的线构成的一种布局模式。
网格具有 列(column)与行(row),间隙(又叫"沟槽")(gutter)。
创建网格
选择一个容器,加上属性
display:grid;
就创建了一个只有一列的网格
网格添加列
- 固定: 可以用px, 百分比,等任何单位.
- 灵活网格: 使用fr(剩余空间)重复构建列
<style>
.container {
display: grid;
/* 均分三列
等价于 grid-template-columns: repeat(3, 1fr);*/
grid-template-columns: 1fr 1fr 1fr;
}
</style>
1fr 的意思是“100%的剩余空间”.
repeat(3, 1fr) 重复三个1fr.
网格间隙 gap
<style>
.container {
display: grid;
/* 均分三列 */
/* grid-template-columns: 1fr 1fr 1fr; */
grid-template-columns: 1fr 2fr 3fr;
/* 间隙 */
gap: 10px;
}
</style>
网格添加行属性
<style>
.container {
/* width: 100vw;
height: 100vh; */
display: grid;
/* 均分三列 */
/* grid-template-columns: 1fr 1fr 1fr; */
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: 1fr 2fr 3fr;
gap: 10px;
}
</style>
显式网格与隐式网格的区别
- 显式网格是我们用grid-template-columns 或 grid-template-rows 属性创建的.
- 隐式网格则是当有内容被放到网格外时才会生成的。显式网格与隐式网格的关系与弹性盒子的main和cross轴的关系有些类似。隐式网格中生成的行/列大小是参数默认是auto,大小会根据放入的内容自动调整。也可以使用grid-auto-rows和grid-auto-columns属性手动设定隐式网格的大小。eg:
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
grid-gap: 20px;
}
</style>
minmax() 函数
尽可能多地放下这些二百像素的网格:
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
- 设定为至少100像素, 尺寸保证能容纳所有内容:grid-auto-rows: minmax(100px, auto);
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 行高最小100px,不设上限 */
grid-auto-rows: minmax(100px, auto);
gap: 20px;
}
</style>
固定三列,每个网格的行高根据内容大小自动扩大.
变成:
自动使用多列填充
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(100px, auto);
grid-gap: 20px;
}
</style>
基于线的元素放置
在英文中,第一条列分隔线(即网格边缘线)在网格的最左边
grid-column-start (en-US):
grid-column-end (en-US)
最左边那条线是 1
最右边那条线是 n(列数) + 1 或 -1
而第一条行分隔线在网格的最上面。
grid-row-start (en-US):
grid-row-end (en-US)
grid-column CSS属性是
grid-column-start (en-US) 和 grid-column-end (en-US)
的简写属性,
<style>
/*占两列, 结尾线的编号是7*/
grid-column: span 2 / 7;
/*第一条线开头占两行*/
grid-row: 1 / span 2;
/* 从第二条线开始,到最后*/
grid-row: 2 / -1;
</style>
划分好区域:,grid内子元素的部分会按序对号入座:
<style>
/* 基于线布局 */
header {
grid-column: 1 / 3;
grid-row: 1;
}
/* 第二列 第二行 */
article {
grid-column: 2;
grid-row: 2;
}
aside {
grid-column: 1;
grid-row: 2;
}
footer {
grid-column: 1 / 3;
grid-row: 3;
}
</style>
ctrl+u查看原码, css样式表,不同方法会被注释;可以放到自己的编译器,进行修改.包含下面几种方式.
grid-template-areas属性放置元素
<style>
/* 基于grid-template-areas属性布局
-------------------------------------------------- */
.container {
display: grid;
grid-template-areas: "header header" "sidebar content" "footer footer";
grid-template-columns: 1fr 3fr;
grid-gap: 20px;
}
header {
grid-area: header;
}
article {
grid-area: content;
}
aside {
grid-area: sidebar;
}
footer {
grid-area: footer;
}
</style>
使用.符号,让一个格子留空
下一节: 前端之浮动布局