antd的栅格系统使用

antd中栅格系统的使用

antd-grid 栅格

所有的Col必须放在Row

gutter(间隔)

row的gutter属性能控制col之间的间隔, 单位为px

1. 控制水平方向上的间隔

Row gutter={水平间距}

<Row gutter={16}>
   <Col className="gutter-row" span={6}>
     <div style={style}>col-6</div>
   </Col>
   <Col className="gutter-row" span={6}>
     <div style={style}>col-6</div>
   </Col>
   <Col className="gutter-row" span={6}>
     <div style={style}>col-6</div>
   </Col>
   <Col className="gutter-row" span={6}>
     <div style={style}>col-6</div>
   </Col>
</Row>

2. 控制水平和垂直方向的间隔

gutter={[水平间距,垂直间距]}

<Row gutter={[16, 24]}>
  <Col className="gutter-row" span={6}>
    <div style={style}>col-6</div>
  </Col>
  <Col className="gutter-row" span={6}>
    <div style={style}>col-6</div>
  </Col>
  <Col className="gutter-row" span={6}>
    <div style={style}>col-6</div>
  </Col>
  <Col className="gutter-row" span={6}>
    <div style={style}>col-6</div>
  </Col>
  <Col className="gutter-row" span={6}>
    <div style={style}>col-6</div>
  </Col>
  <Col className="gutter-row" span={6}>
    <div style={style}>col-6</div>
  </Col>
  <Col className="gutter-row" span={6}>
    <div style={style}>col-6</div>
  </Col>
  <Col className="gutter-row" span={6}>
    <div style={style}>col-6</div>
  </Col>
</Row>

3. 动态响应

根据屏幕的宽度, 采用不同的间隔
其中 xs={6} 相当于 xs={{ span: 6 }}
其他还可以添加属性有span pull push offset order
这些属性同时也可以直接添加到col组件上

<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
  <Col className="gutter-row" span={6}>
    <div style={style}>col-6</div>
  </Col>
  <Col className="gutter-row" span={6}>
    <div style={style}>col-6</div>
  </Col>
  <Col className="gutter-row" span={6}>
    <div style={style}>col-6</div>
  </Col>
  <Col className="gutter-row" span={6}>
    <div style={style}>col-6</div>
  </Col>
</Row>

配合form表单使用

1. 左右两列

<Form layout="horizontal" style={{ width: "500px" }}>
  <Row gutter={[24, 16]}>
    <Col span={12}>
      <Item label="form1">
        <Input></Input>
      </Item>
    </Col>
    <Col span={12}>
      <Item label="form1">
        <Input></Input>
      </Item>
    </Col>
    <Col span={12}>
      <Item label="form1234567890">
        <Input></Input>
      </Item>
    </Col>
    <Col span={12}>
      <Item label="form1">
        <Input></Input>
      </Item>
    </Col>
  </Row>
</Form>

2. label文案对齐

2.1 全局formItem的label对齐

2.2 左边部分对齐

import React from "react";
import { Form, Input, Col, Row } from "antd";

const { Item } = Form;

const formLayout = {
  labelCol: {
    span: 14,
  },
  wrapperCol: {
    span: 10,
  },
};

export default function form() {
  return (
    <Form layout="horizontal" style={{ width: "500px" }} >
      <Row gutter={[24, 16]}>
        <Col span={12}>
          <Item label="form1" {...formLayout}>
            <Input></Input>
          </Item>
        </Col>
        <Col span={12}>
          <Item label="form1">
            <Input></Input>
          </Item>
        </Col>
        <Col span={12}>
          <Item label="form1234567890" {...formLayout}>
            <Input></Input>
          </Item>
        </Col>
        <Col span={12}>
          <Item label="form1">
            <Input></Input>
          </Item>
        </Col>
      </Row>
    </Form>
  );
}

3. 留空

import React from "react";
import { Form, Input, Col, Row } from "antd";

const { Item } = Form;

const formLayout = {
  labelCol: {
    span: 14,
  },
  wrapperCol: {
    span: 10,
  },
};

export default function form() {
  return (
    <Form layout="horizontal" style={{ width: "500px" }} {...formLayout}>
      <Row gutter={[24, 16]}>
        <Col span={12} />
        <Col span={12}>// 或者用push属性替代上面的col也行
          <Item label="form1">
            <Input></Input>
          </Item>
        </Col>
        <Col span={12}>
          <Item label="form1234567890">
            <Input></Input>
          </Item>
        </Col>
        <Col span={12}>
          <Item label="form1">
            <Input></Input>
          </Item>
        </Col>
      </Row>
    </Form>
  );
}