使用grid实现基本的网格布局
display :grid 开启网格布局;
grid-template-columns :1fr 1.5fr 设置网格行的宽度、数量;
grid-row-gap: 1px; 设置列的间隙;
grid-column-gap: 1px; 设置行的间隙;
grid-area :4/2/5/7
grid-row-start、grid-column-start、grid-row-end、grid-column-end
单独设置某项盒子的大小 :从第n行线开始 / 从第n列线开始 / 从第n行线结束 / 从第n列线结束
<div class="grid">
<div class="check">入职时间</div>
<div></div>
<div>试用期</div>
<div></div>
<div>转正日期</div>
<div></div>
<div class="check">聘用形式</div>
<div></div>
<div>用工类型</div>
<div></div>
<div class="check">用工单位</div>
<div></div>
<div>部门</div>
<div></div>
<div>职务</div>
<div></div>
<div class="check">职位</div>
<div></div>
<div>工作地点</div>
<div class="max-grid"></div>
</div>
.grid {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr 1.5fr 1fr 1.5fr;
grid-row-gap: 1px;
grid-column-gap: 1px;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: rgba(0, 0, 0, 0.15);
div {
height: 45px;
padding: 12px 0 0 24px;
background-color: #fff;
color: rgba(0, 0, 0, 0.65);
&:nth-child(2n + 1) {
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
background-color: #fafafa;
}
}
}
.max-grid {
grid-area: 4/2/5/7;
}