How does element-ui implement this layout

the first time I use element layout, I am not very good at reading what is written on the document with el-row el-col, but I did not write this effect on the picture. The left text is on a line with the grid on the right, and then the grid on the right is aligned after the line wrapping. There are and check boxes

inside.
Sep.27,2021

you can use

again.
<el-form>
    <el-form-item lable="">
        <el-row>
            <el-col v-for="item in list" :offset="4">
            </el-col>
        </el-row>
    </el-form-item>
</el-form>

but it is more recommended that you use flex on the right


    <el-row :gutter="20">
      <el-col :span="3">00000:</el-col>
      <el-col :span="21">
        <el-row :gutter="20">
          <el-col :span="6"><el-card>1111</el-card></el-col>
          <el-col :span="6"><el-card>2222</el-card></el-col>
          <el-col :span="6"><el-card>3333</el-card></el-col>
          <el-col :span="6"><el-card>4444</el-card></el-col>
          <el-col :span="6"><el-card>5555</el-card></el-col>
        </el-row>
      </el-col>
    </el-row>

this effect should be the same as you asked for, and then cycle it as needed

Menu