Grid 布局的属性分成两类
容器属性:
div {
display: grid;
//1、绝对长度写法
grid-template-columns: 100px 100px 100px; //定义每一列的列宽
//2、百分比写法
// grid-template-columns: 33.33% 33.33% 33.33%;
//3、repeat(重复的次数,所要重复的值) 写法
// grid-template-columns: repeat(3, 33.33%);
//4、auto-fill关键字 自动填充,每行尽量多的填充100px,直到放不下,在换行
// grid-template-columns: repeat(auto-fill, 100px);
//5、fr关键字 如下:每行共分3份,前者占一份,后者占两份(可以与绝对长度的单位结合使用)
// grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 100px 100px; //定义每一行的行高
grid-row-gap: 20px; //行与行的间隔(行间距)
grid-column-gap: 20px; //列与列的间隔(列间距)
//grid-gap: 20px 20px; 结合写法
//grid-gap: 20px; 结合写法
grid-auto-flow: column; //容器子元素顺序;默认值是row,即"先行后列";也可以将它设成column,变成"先列后行";
}
项目属性:
1、指定项目的四个边框,分别定位在哪根网格线
//grid-column-start属性:左边框所在的垂直网格线
//grid-column-end属性:右边框所在的垂直网格线
//grid-row-start属性:上边框所在的水平网格线
//grid-row-end属性:下边框所在的水平网格线
.div1{
grid-column-start: 2;rvr
}
2、grid-column属性和grid-row属性(指定项目的四个边框)
.div1 {
grid-column: 1/3;//grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row: 1/2;//grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
}
/* 等同于 */
.div1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
/* 等同于 */
//span关键字,表示跨越多少个网格
.div1 {
grid-column: 1 / span 2;
grid-row: 1 / span 1;
}
3、grid-area 属性
//grid-area属性指定项目放在哪一个区域。
.div1 {
grid-area: f; //a、b、c、d、e、f、、、
}
//grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
.div1 {
grid-area: 1/1/3/3;
}
4、justify-self 属性,align-self 属性,place-self 属性
//justify-self属性设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个项目
// justify-self: start | end | center | stretch;
//align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目
//align-self: start | end | center | stretch;
//start:对齐单元格的起始边缘
//end:对齐单元格的结束边缘
//center:单元格内部居中
//stretch:拉伸,占满单元格的整个宽度(默认值)
.div1 {
justify-self: start;
}
//place-self:<align-self> <justify-self>;(align-self属性和justify-self属性的合并简写形式)
.div1 {
place-self: center center;
}
网友评论