Basic · Grid
Grid
24 grid system.

Overview

The grid system of layout, we define the external framework of information blocks based on row and column (col) to ensure that each area of the page can be robustly arranged.

Flex layout

Our grid system supports the Flex layout, allowing the horizontal alignment of child elements within the parent node - left, center, right, equal width, scattered arrangement. Between child elements and child elements, support top alignment, vertical center alignment, bottom alignment. At the same time, support the use of order To define the order of the elements.

Demos

How to import

Basic Usage

From stacking to horizontal arrangement.
Using a single set of Row and Col grid components, you can create a basic grid system. All Col must be placed in the Row.

Gutter interval

The grid often needs to work with the interval. You can use Row's Gutter Properties, we recommend using (16 + 8n) px as a grid interval. (n is a natural number)
Vertical gutter can be in the form of an array. The first item of the array is horizontal gutter and the second item is vertical gutter.
If you want to support responsiveness, you can write {xs: 8, sm: 16, md: 24, lg: 32}.
Vertical gutter in array form supported from version 1.11.0
Dark for content area, light for spacing

Offset

Use Flex layout

Use row-flex to define a Flex layout whose child elements are based on different values start,center,end,space-between,space-around, define their typesetting methods in the parent node respectively.

Flex subelements vertically aligned

Flex element sorting

Change the sorting of elements through order of the Col.

Responsive

Referring to Bootstrap's responsive design, preset six response sizes:xs, sm, md, lg, Xl, xxl.

API reference

Row

PropertiesInstructionstypeDefault
alignVertical alignment under flex layout: top middle bottomstring
classNameClass namestring
gutterGrid interval, can be written as pixel value or support responsive object writing { xs: 8, sm: 16, md: 24}, Vertical gutter support from version 1.11.0number / object / array
justifyHorizontal arrangement under flex layout: start end center space-around space-betweenstringstart
stylestyleCSSProperties
typeLayout mode, optional flex, valid under Modern Browserstring

Col

PropertiesInstructionstypeDefault
lg≥ 992px responsive grid, which can be a number of grids or an object containing other propertiesnumber|object-
md≥ 768px responsive grid, which can be a number of grids or an object containing other propertiesnumber|object-
offsetThe number of interval cells on the left side of a grid. There can be no grid in the interval.number0
orderGrid order, effective in flex layout modenumber0
pullThe grid moves to the left.number0
pushThe grid moves to the right.number0
sm≥ 576px responsive grid, which can be a number of grids or an object containing other propertiesnumber|object-
spanThe number of grid spaces is equivalent to display: none when it is 0number-
xl≥ 1200px responsive grid, which can be a number of grids or an object containing other propertiesnumber|object-
xs< 576px responsive grid, which can be a number of grids or an object containing other attributesnumber|object-
xxl≥ 1600px responsive grid, which can be a number of grids or an object containing other propertiesnumber|object-

Design Tokens

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED