网格布局grid
提供了带有行和列的基于网格的布局系统，无需使用浮动和定位。
当 HTML 元素的 display 属性设置为 grid 或 inline-grid 时，它就会成为网格容器。
更多布局模式可以参考之前的博客：
CSS—flex布局、过渡transition属性、2D转换transform属性、3D转换transform属性
有关display属性之前也有写过：
CSS—显示模式display、float浮动，清除浮动的6种方式、定位position、元素溢出overflow
当把网格项目放在网格容器中时，引用行号：
把网格项目放在列线 1，并在列线 3 结束它：
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}| 属性 | 描述 |
|---|---|
grid-column |
定义将项目放置在哪一列上。是 grid-column-start和grid-column-end缩写</br>例如：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 属性才能生效。 |
<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<p>Item1 的名为 "myArea"，会占据两列两行</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】