自助建站编辑器找建设企业网站公司
网格布局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>【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】