Study Notes for el-col and el-row Layout in Element UI Components

1. Introduction

el-col: column. It is the core component in the Element UI layout. Its function is to divide a row into 24 grids. In order to facilitate us to adapt to different screen sizes on different devices. We can determine the number of grids in a row by specifying the span attribute.

el-row: row. Wrapped in the outer layer of el-col, there can be countless el-cols in it.

    <el-row style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="24">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

 

In normal form, :span defaults to 24. If :span is 12, then it is half of the original number of columns.

    <el-row style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

  

Second, the attributes of el-row:

:gutter adjusts the width between layouts---column spacing. (that is, the separation distance between two columns)

Original code:

    <el-row style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12">
        <div style="background:red;height:100px"></div>
      </el-col>
      <el-col :span="12">
        <div style="background:yellow;height:100px"></div>
      </el-col>
    </el-row>

 If there is a gap between the two divs to show the difference. Just use the :gutter attribute.

    <el-row :gutter="20" style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12">
        <div style="background:red;height:100px"></div>
      </el-col>
      <el-col :span="12">
        <div style="background:yellow;height:100px"></div>
      </el-col>
    </el-row>

 However, in the web page code, its code is displayed as:

 In other words, the :gutter attribute actually sets the padding attribute of the div.

Three, el-col attribute

(1): offset adjusts the position of the block (1 grid/24 grids each time)

    <el-row :gutter="20" style="border:1px solid #333;width:300px;height:102px">
      <el-col :offset="6" :span="12">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

(2) :push moves the number of grids to the right, the value is an integer between 1-24

    <el-row style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12" :push="2">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

 

 

(3): pull moves the number of grids to the left, and the value is an integer between 1-24

    <el-row style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12" :pull="2">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

 

 (4) Element UI responsive layout

xs: <768px Responsive grid number or attribute object, very small screen, such as mobile phone. For example: { span: 4, offset: 8 }

sm: ≥768px Responsive grid number or attribute object, small screen, such as tablet. For example: { span: 4, offset: 8 }

md: ≥992px Responsive grid number or attribute object, medium screen, such as desktop monitor. For example: { span: 4, offset: 8 }

lg: ≥1200px Responsive grid number or attribute object, large screen, such as a large desktop monitor. For example: { span: 4, offset: 8 }

xl: ≥1920px Responsive grid number or attribute object, super large screen display, such as 2k screen, etc. For example: { span: 4, offset: 8 }

<el-col :span="20" :xl="{span:16}"></el-col>

 3. Alignment

By setting type="flex", start the flex layout, and adjust the typesetting method through the justify attribute.

Justify attribute values: center centered start, left aligned end right aligned space-between spaces aligned in the middle space-around left and right take up half a space space alignment

    <el-row type="flex" justify="center" style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>