CSS网格布局Grid
目录
CSS—网格布局Grid
网格布局grid
提供了带有行和列的基于网格的布局系统，无需使用浮动和定位。
当 HTML 元素的
display
属性设置为
grid
或
inline-grid
时，它就会成为网格容器。
更多布局模式可以参考之前的博客：
有关display属性之前也有写过：
当把网格项目放在网格容器中时，引用行号：
把网格项目放在列线 1，并在列线 3 结束它：
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}| 属性 | 描述 |
|---|---|
grid-column | 定义将项目放置在哪一列上。是 grid-column-start和grid-column-end缩写例如： grid-column: 2/3; 第2列开始第3列结束。 |
grid-row | 定义将项目放置在哪一行上，写法与 grid-column 类似 |
grid-area | grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写。 也可用于为项目命名 。 |
grid-column-gap | 调整列间隙 |
grid-row-gap | 调整行间隙 |
grid-gap | 调整间隙 |
grid-template-columns | 定义网格布局中的列数，并可定义每列的宽度。以空格分隔的列表，其中每个值定义相应列的长度。 |
grid-template-rows | 定义每列的高度 |
justify-content | 在容器内对齐整个网格。网格的总宽度必须小于容器的宽度， justify-content 属性才能生效。 |
align-content | 垂直对齐容器内的整个网格。网格的总高度必须小于容器的高度， align-content 属性才能生效。 |
Item1 的名为 "myArea"，会占据两列两行
1
2
3
4
5
6【 记录学习过程的笔记，欢迎大家一起讨论，会持续更新 】