scss
.form-layout {
$max-columns-count: 12;
display: grid;
grid-template-columns: repeat($max-columns-count, 1fr);
grid-row-gap: 0;
grid-column-gap: 32px;
&__column {
grid-column: span 1;
}
@for $i from 2 through $max-columns-count {
&__column#{$i} {
grid-column: span $i;
}
}
}
use
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="rules"
class="demo-ruleForm"
>
<div class="form-layout">
<el-form-item label="借用人 :" prop="tenant" class="form-layout__column4">
</el-form-item>
<div class="form-layout__column8"></div>
<el-form-item
label="借用时间 :"
prop="borrowTime"
class="form-layout__column4"
>
</el-form-item>
<el-form-item
label="归还时间 :"
prop="returnTime"
class="form-layout__column4"
>
</el-form-item>
<el-form-item
label="借用原因 :"
prop="borrowingCauses"
class="form-layout__column12"
>
</el-form-item>
</div>
</el-form>