logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0
Design concept
Outline
Examples
Basic Grid
Grid Gutter
Column offset
Grid sort
Typesetting
Alignment
Order
Flex Stretch
Responsive
Flex Responsive
More responsive
Playground
useBreakpoint Hook
API
Row
Col
Design Token

Grid

24 Grids System.
Importimport { Grid } from "antd";
Sourcecomponents/grid
Docs
Edit this pageChangelog
contributors
  • FlexLayout

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    Design concept

    grid design

    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 <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.

    Our grid systems base on Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using order.

    Layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.

    Examples

    API

    Common props ref:Common props

    If the Ant Design grid layout component does not meet your needs, you can use the excellent layout components of the community:

    • react-flexbox-grid
    • react-blocks

    Row

    PropertyDescriptionTypeDefaultVersion
    alignVertical alignmenttop | middle | bottom | stretch | {[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl']: 'top' | 'middle' | 'bottom' | 'stretch'}topobject: 4.24.0
    gutterSpacing 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 | array0
    justifyHorizontal arrangementstart | end | center | space-around | space-between | space-evenly | {[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl']: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'}startobject: 4.24.0
    wrapAuto wrap linebooleantrue4.8.0

    Col

    PropertyDescriptionTypeDefaultVersion
    flexFlex layout stylestring | number-
    offsetThe number of cells to offset Col from the leftnumber0
    orderRaster ordernumber0
    pullThe number of cells that raster is moved to the leftnumber0
    pushThe number of cells that raster is moved to the rightnumber0
    spanRaster number of cells to occupy, 0 corresponds to display: nonenumbernone
    xsscreen < 576px and also default setting, could be a span value or an object containing above propsnumber | object-
    smscreen ≥ 576px, could be a span value or an object containing above propsnumber | object-
    mdscreen ≥ 768px, could be a span value or an object containing above propsnumber | object-
    lgscreen ≥ 992px, could be a span value or an object containing above propsnumber | object-
    xlscreen ≥ 1200px, could be a span value or an object containing above propsnumber | object-
    xxlscreen ≥ 1600px, could be a span value or an object containing above propsnumber | object-

    You can modify the breakpoints values using by modifying screen[XS|SM|MD|LG|XL|XXL] with theme customization (since 5.1.0, sandbox demo).

    The breakpoints of responsive grid follow BootStrap 4 media queries rules (not including occasionally part).

    Design Token

    Basic Grid

    From the stack to the horizontal arrangement.

    You can create a basic grid system by using a single set of Row and Col grid assembly, all of the columns (Col) must be placed in Row.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Grid Gutter

    You can use the gutter property of Row as grid spacing, we recommend set it to (16 + 8n) px (n stands for natural number).

    You can set it to a object like { xs: 8, sm: 16, md: 24, lg: 32 } for responsive design.

    You can use an array to set vertical spacing, [horizontal, vertical] [16, { xs: 8, sm: 16, md: 24, lg: 32 }].

    vertical gutter was supported after 3.24.0.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Column offset

    offset can set the column to the right side. For example, using offset = {4} can set the element shifted to the right four columns width.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Grid sort

    By using push and pull class you can easily change column order.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Typesetting

    Child elements depending on the value of the start, center, end, space-between, space-around and space-evenly, which are defined in its parent node typesetting mode.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Alignment

    Child elements vertically aligned.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Order

    To change the element sort by order.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Flex Stretch

    Col provides flex prop to support fill rest.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Responsive

    Referring to the Bootstrap responsive design, here preset six dimensions: xs sm md lg xl xxl.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Flex Responsive

    Support much more flexible responsive flex ratio, which requires CSS Variables supported by browser.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    5.14.0
    More responsive

    span pull push offset order property can be embedded into xs sm md lg xl xxl properties to use, where xs={6} is equivalent to xs={{span: 6}}.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Playground

    A simple playground for column count and gutter.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    useBreakpoint Hook

    Use useBreakpoint Hook provide personalized layout. xs only takes effect when the screen match the min width.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    col
    col-12
    col-12
    col-8
    col-8
    col-8
    col-6
    col-6
    col-6
    col-6
    Horizontal
    col-6
    col-6
    col-6
    col-6
    Responsive
    col-6
    col-6
    col-6
    col-6
    Vertical
    col-6
    col-6
    col-6
    col-6
    col-6
    col-6
    col-6
    col-6
    col-8
    col-8
    col-6 col-offset-6
    col-6 col-offset-6
    col-12 col-offset-6
    col-18 col-push-6
    col-6 col-pull-18
    sub-element align left
    col-4
    col-4
    col-4
    col-4
    sub-element align center
    col-4
    col-4
    col-4
    col-4
    sub-element align right
    col-4
    col-4
    col-4
    col-4
    sub-element monospaced arrangement
    col-4
    col-4
    col-4
    col-4
    sub-element align full
    col-4
    col-4
    col-4
    col-4
    sub-element align evenly
    col-4
    col-4
    col-4
    col-4
    Align Top

    col-4

    col-4

    col-4

    col-4

    Align Middle

    col-4

    col-4

    col-4

    col-4

    Align Bottom

    col-4

    col-4

    col-4

    col-4

    Normal
    1 col-order-4
    2 col-order-3
    3 col-order-2
    4 col-order-1
    Responsive
    1 col-order-responsive
    2 col-order-responsive
    3 col-order-responsive
    4 col-order-responsive
    Percentage columns
    2 / 5
    3 / 5
    Fill rest
    100px
    Fill Rest
    Raw flex style
    1 1 200px
    0 1 300px
    none
    auto with no-wrap
    Col
    Col
    Col
    Col
    Col
    Col
    Col
    Col
    Col
    Col
    Col
    Col
    Col
    Col
    Col
    Col
    Horizontal Gutter (px):
    81624324048
    Vertical Gutter (px):
    81624324048
    Column Count:
    2346812
    Column
    Column
    Column
    Column
    Column
    Column
    Column
    Column
    Another Row:
    Column
    Column
    Column
    Column
    <Row gutter={[16, 16]}>
      <Col span={6} />
      <Col span={6} />
      <Col span={6} />
      <Col span={6} />
    
      <Col span={6} />
      <Col span={6} />
      <Col span={6} />
      <Col span={6} />
    </Row>
    <Row gutter={[16, 16]}>
      <Col span={6} />
      <Col span={6} />
      <Col span={6} />
      <Col span={6} />
    </Row>
    Current break point: