<!DOCTYPE html>
<html>
<head>
<title>网格布局</title>
<style type="text/css">
.grid-container {
display: grid;
/*有几行/列，每行/列的宽度*/
/*有三列，每列宽度分别是：*/
/*grid-template-columns: auto auto auto;*/
grid-template-columns: 100px 100px 150px;
/*有三行，每列宽度分别是：*/
/*fr是比例的单位*/
grid-template-rows: 1fr 2fr 1fr;
/*网格行/列之间的间距*/
/*列间距*/
grid-column-gap: 50px;
/*行间距*/
grid-row-gap: 20px;
/*行列间距简写*/
/*grid-gap: 20px 50px;*/
/*网格命名*/
/*grid-template-areas: 'a b c'
'd e f'
'g h i';*/
/*元素位置*/
/*水平方向*/
/*justify-items: center; */
/*垂直方向*/
/*align-items: start;*/
/*place-items属性是align-items属性和justify-items属性的合并简写形式*/
/*place-items: start end;*/
/*整个内容区域在容器里面的水平位置*/
justify-content: center;
/*align-content: center;*/
/*简写*/
/*place-content: space-around space-evenly;*/
/*比如我设置（grid-template-columns和grid-template-rows）三行三列的网格，但是后面又增加了多余的单元格，如何设置这些多余单元格的样式*/
grid-auto-rows: 250px;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.item1 {
/*合并网格*/
/*合并第一列到第三列*/
grid-column-start: 1;
grid-column-end: 3;
/*简写*/
grid-column: 1 / 3;
/*合并第一行到第四行*/
grid-row-start: 1;
grid-row-end: 4;
grid-row: 1 / 4;
/*项目放在哪一个区域*/
/*grid-area: e;*/
/*设置单元格内容的水平位置*/
/*justify-self: center;
align-self: center;*/
}
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
参考资料
https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html