HTML:
<body>
<div class="headTitle">常用的Grid布局</div>
<div class="layout">
<div class="box box1">box方块</div>
<div class="box">box方块</div>
<div class="box">box方块</div>
<div class="box">box方块</div>
<div class="box">box方块</div>
<div class="box">box方块</div>
<div class="box">box方块</div>
<div class="box">box方块</div>
<div class="box">box方块</div>
<div class="box">box方块</div>
<div class="box">box方块</div>
</div>
</body>
CSS:
<style>
.headTitle {
text-align: center;
color: #555;
font-size: 26px;
padding: 30px 0;
}
.layout {
border-radius: 10px;
margin: 0 auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
padding: 30px;
display: grid;
/*grid-template-columns: 1fr 2fr 1fr 1fr;*/ 一行4个 按比例划分宽度
/*grid-template-columns: repeat(5, 1fr);*/ 一行5个 平均分
/*grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));*/ 自动分配宽度，响应式布局 最小每个260px 然后平分
grid-template-columns: repeat(5, 1fr); // 一行5个
gap: 30px;
height: 400px;
}
.layout .box {
/*height: 200px;*/
/**/
background-color: #FFCF7F;
border-radius: 8px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.layout .box1 { // 第一个块
grid-row: 1/3; // row 第一条边到第三条边
grid-column: 1/3; // coloumn 第一条边到第三条边
}
</style>
标签：box,布局,1fr,grid,CSS,template,Grid,columns,方块 From： https://www.cnblogs.com/hotMemo/p/18537354