LayUI:
https://www.layui.com/demo/grid.html
CSS布局之栅格布局
栅格(grid)是一种自适应布局,能根据不同终端自动伸缩容器的宽高。flex根据轴线(axis)布局,看起来像是一维布局;而grid针对网格线(grid line)布局,看起来更像是二维布局。
跟flex一样,grid由栅格容器(grid container)和栅格项目(grid item)组成。
栅格容器
通过display: grid可以将元素声明为块级栅格容器,通过display: inline-grid可以将元素声明为行内栅格容器。
-
grid属性
grid是一个复合属性,包括grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow六个属性的合并。 -
grid-template-rows属性
grid-template-rows属性,定义每一行的高度。 -
grid-template-columns属性
grid-template-columns属性,定义每一列的宽度。
这两个属性除了可以用合理的长度单位之外,还有一些专用的属性值。
repeat(int,):重复某个值,第1个参数为重复次数,第2个值为长度
auto-fill: 自动填充
fr: fraction(片段),表示比例关系
minmax(,): 数字在这两个范围内浮动
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:
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: ;
栅格项目
grid-row-start属性
grid-row-start属性,表示单元格内容的起始栅格线序号;
grid-row-start: ;
grid-row-end属性
grid-row-end属性,表示单元格内容的终止栅格线序号;
grid-row-end: ;
grid-column-start属性
grid-column-start属性,表示单元格内容的起始栅格线序号;
grid-column-start: ;
grid-column-end属性
grid-column-end属性,表示单元格内容的终止栅格线序号;
grid-column-end: ;
grid-column属性
grid-column属性是grid-column-start属性和grid-column-end属性的合并;
grid-column: ;
grid-row属性
grid-row属性是grid-row-start属性和grid-row-end属性的合并;
grid-row: ;
justify-self属性
justify-self属性,指定单元格内容的水平排列方向;
justify-self: start | end | center | stretch;
align-self属性
align-self属性,指定单元格内容的垂直排列方向;
align-self: start | end | center | stretch;
place-self属性
place-self属性是justify-self和align-self属性的合并。
place-self: ;
原文链接:https://www.cnblogs.com/juetan/p/13210411.html