一、序言
先说什么?当然先说大家最关心的兼容性了
CanIUse
嗯,对于非要兼容IE的开发者,我建议,量力而行!兼容性还是不如Flex
当然,如果你flex够熟悉了,但却被一些布局有时候难倒,我建议还是学习一下Grid,会让你柳暗花明,眼前一亮的
二、基础使用
1)grid-template-columns和grid-template-rows属性来定义网格的列和行
grid-template-rows / grid-template-columns 接收的值有 auto、fr、px 和 %。
fr类似flex的flex:1
.container {display: grid;grid-template-columns: 100px 200px 100px; /* 定义三列,宽度分别为100px, 200px和100px */grid-template-rows: 50px 100px; /* 定义两行,行高分别为50px和100px *//* 其他值举例 */grid-template-columns: [linename1] 100px [linename2 linename3]; // 一条网格线多个名字grid-template-columns: minmax(100px, 1fr); // 最小100px, 最大满屏grid-template-columns: fit-content(40%); // 指定最大值不超过屏宽40%
}
2)grid-column 和 grid-row 属性来控制网格项目的位置和大小。
.item1 {grid-column: 1 / 3; /* 从第1列开始,跨越到第3列 */grid-row: 1 / 2; /* 从第1行开始,跨越到第2行 */
}
3)网格线命名
.container {display: grid;grid-template-columns: [start] 100px [middle] 200px [end] 100px;grid-template-rows: [header] 50px [main] 100px;
}.item1 {grid-column: start / middle; /* 从名为 'start' 的线到 'middle' 的线 */grid-row: header / main; /* 从名为 'header' 的线到 'main' 的线 */
}
4)自动布局
.container {display: grid;grid-template-columns: repeat(3, 1fr); /* 创建3个等宽的列 */
}.container {display: grid;grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 自动填充列,最小宽度100px,最大宽度1fr */
}
5)grid-template-areas定义网格区域
grid-template-areas: "header header header""navigation main ads""footer footer footer";
6) row-gap和column-gap定义间距,可简写gap
row-gap: 20px; /* 设置行间距为20px */column-gap: 30px; /* 设置列间距为30px */
7)justify-items: start | end | center | stretch(默认),定义网格子项的内容水平方向上的对齐方式
8)align-items: start | end | center | stretch(默认),定义网格子项的内容垂直方向上的对齐方式
9)place-self里面包含了有 justify-self、align-self 两个属性
10)grid-auto-flow 属性定义自动布局算法,可选为row,column,dense(稠密堆积算法);
11)grid-auto-rows 定义隐式创建的行高度
三、技巧:
1.使某些元素占满视口
grid-column: 1 / -1;