CSS布局之栅格布局
栅格(grid)是⼀种⾃适应布局，能根据不同终端⾃动伸缩容器的宽⾼。flex根据轴线(axis)布局，看起来像是⼀维布局；⽽grid针对⽹格线(grid line)布局，看起来更像是⼆维布局。
跟flex⼀样，grid由栅格容器(grid container)和栅格项⽬(grid item)组成。
栅格容器
通过display: grid可以将元素声明为块级栅格容器，通过display: inline-grid可以将元素声明为⾏内栅格容器。
1. grid属性
grid是⼀个复合属性，包括grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow六个属性的合并。
1. grid-template-rows属性
grid-template-rows属性，定义每⼀⾏的⾼度。
2. grid-template-columns属性
grid-template-columns属性，定义每⼀列的宽度。
这两个属性除了可以⽤合理的长度单位之外，还有⼀些专⽤的属性值。
repeat(int,<length>)：重复某个值，第1个参数为重复次数，第2个值为长度
auto-fill: ⾃动填充
fr: fraction(⽚段)，表⽰⽐例关系
minmax(<length>,<length>): 数字在这两个范围内浮动
css实现三列布局
auto: ⾃动计算长度
每个长度之前还可以指定⽹格线的名字，例如
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
3. grid-template-areas属性
grid-template-areas属性，定义每个单元格所属的区域；
/
/ 以九宫格为例，按⾏书写
grid-template-areas: "a b c" "d e f" "g h i";
4. grid-auto-rows属性
grid-auto-rows属性，表⽰⾃动计算项⽬的⾼度。
// 在2*3的容器内，指定某个元素在第4⾏第2列，此时多出来的单元格⾼度都为30px
grid-auto-rows: 30px
5. grid-auto-columns属性
grid-auto-columns，表⽰⾃动计算项⽬的宽度。
// // 在2*3的容器内，指定某个元素在第4⾏第2列，此时多出来的单元格宽度都为30px
grid-auto-columns: 30px
6. grid-auto-flow属性
grid-auto-flow属性，表⽰⾃动排序项⽬的⽅式。
grid-auto-flow: row | column | row dense | column dense;
7. justify-content属性
justify-content属性，表⽰容器内容的⽔平排列⽅向；
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
8. align-content属性
align-content属性，表⽰容器内容的垂直排列⽅向；
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
9. place-content属性
place-content属性是align-content和justify-content两个属性的合并
place-content: <align-content> <justify-content>
10. justify-items属性
justify-items属性，表⽰单元格内容的⽔平对齐⽅式；
justify-items: start | end | center | stretch;
11. align-items属性
align-items属性，表⽰单元格内容的垂直对齐⽅式；
align-items: start | end | center | stretch;
12. place-items属性
place-items属性是align-items和justify-items属性的合并。
place-items: <align-items> <justify-items>;
栅格项⽬
1. grid-row-start属性
grid-row-start属性，表⽰单元格内容的起始栅格线序号；
grid-row-start: <number>；
2. grid-row-end属性
grid-row-end属性，表⽰单元格内容的终⽌栅格线序号；
grid-row-end: <number>；
3. grid-column-start属性
grid-column-start属性，表⽰单元格内容的起始栅格线序号；
grid-column-start: <number>；
4. grid-column-end属性
grid-column-end属性，表⽰单元格内容的终⽌栅格线序号；
grid-column-end: <number>；
5. grid-column属性
grid-column属性是grid-column-start属性和grid-column-end属性的合并；
grid-column: <grid-column-start> <grid-column-end>;
6. grid-row属性
grid-row属性是grid-row-start属性和grid-row-end属性的合并；grid-row: <grid-row-start> <grid-row-end>;
7. justify-self属性
justify-self属性，指定单元格内容的⽔平排列⽅向；
justify-self: start | end | center | stretch;
8. align-self属性
align-self属性，指定单元格内容的垂直排列⽅向；
align-self: start | end | center | stretch;
9. place-self属性
place-self属性是justify-self和align-self属性的合并。
place-self: <align-self> <justify-self>;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。