Grid

24 Grids System.

Design concept

In most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.

We name the divided area 'box'. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.

Outline

In the grid system, we define the frame outside the information area based on row and column, to ensure that every area can have stable arrangement.

Following is a brief look at how it works:

• Establish a set of column in the horizontal space defined by row (abbreviated col).
• Your content elements should be placed directly in the col, and only col should be placed directly in row.
• The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by <a-col :span="8" />.
• If the sum of col spans in a row are more than 24, then the overflowing col as a whole will start a new line arrangement.

Examples

Basic

<template>
  <div>
    <a-row>
      <a-col :span="24"><div>col</div></a-col>
    </a-row>
    <a-row>
      <a-col :span="12"><div>col-12</div></a-col>
      <a-col :span="12"><div>col-12</div></a-col>
    </a-row>
    <a-row>
      <a-col :span="8"><div>col-8</div></a-col>
      <a-col :span="8"><div>col-8</div></a-col>
      <a-col :span="8"><div>col-8</div></a-col>
    </a-row>
    <a-row>
      <a-col :span="6"><div>col-6</div></a-col>
      <a-col :span="6"><div>col-6</div></a-col>
      <a-col :span="6"><div>col-6</div></a-col>
      <a-col :span="6"><div>col-6</div></a-col>
    </a-row>
  </div>
</template>

<style scoped>
.ant-row {
  margin-bottom: 16px;
}
.ant-col > div {
  padding: 16px 0;
  background: rgba(0, 146, 255, 0.75);
  text-align: center;
  color: white;
}
.ant-col:nth-child(odd) > div {
  background: rgba(0, 146, 255, 0.5);
}
</style>

Gutter

<template>
  <div>
    <a-divider orientation="left">Horizontal</a-divider>
    <a-row :gutter="16">
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
    </a-row>
    <a-divider orientation="left">Responsive</a-divider>
    <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
    </a-row>
    <a-divider orientation="left">Vertical</a-divider>
    <a-row :gutter="[16, 24]">
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
      <a-col :span="6">
        <div>col-6</div>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
.ant-col > div {
  padding: 16px 0;
  background: #0092ff;
  text-align: center;
  color: white;
  margin-top: 8px;
  margin-bottom: 8px;
}
</style>

API

Row

Property	Description	Type	Default	Version
align	Vertical alignment	top | middle | bottom	top
gutter	Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time [horizontal, vertical]	number | object | array	0
justify	Horizontal arrangement	start | end | center | space-around | space-between | space-evenly	start
wrap	Auto wrap line	boolean	true

Col

Property	Description	Type	Default	Version
flex	Flex layout style	string | number	-
offset	The number of cells to offset Col from the left	number	0
order	Raster order	number	0
pull	The number of cells that raster is moved to the left	number	0
push	The number of cells that raster is moved to the right	number	0
span	Raster number of cells to occupy, 0 corresponds to display: none	number	none
xs	screen < 576px and also default setting, could be a span value or an object containing above props	number | object	-
sm	screen ≥ 576px, could be a span value or an object containing above props	number | object	-
md	screen ≥ 768px, could be a span value or an object containing above props	number | object	-
lg	screen ≥ 992px, could be a span value or an object containing above props	number | object	-
xl	screen ≥ 1200px, could be a span value or an object containing above props	number | object	-
xxl	screen ≥ 1600px, could be a span value or an object containing above props	number | object	-