Refer to the grid system of bootstrap.
Examples
Use span, gutter to achieve basic layout (span set to 0 can realize the hiding of the content block).
Use offset, push, pull to achieve content offset.
span can be passed in the form of objects to realize the layout of different sizes, the default parameters that can be set are: xs, sm, md, lg, xl, xxl. Please try to change the browser window size.
offset, push, pull also support responsiveness. The default parameters that can be set are: xs,sm,md,lg,xl,xxl.
flex layoutIn modern browsers, you can use align and justify to achieve horizontal and vertical alignment in different ways, and you can also use order to change the order of content blocks ( order also supports responsive).
Allow wrap when content is overflow.
Use useBreakpoint Hook provide personalized layout.
Properties
Row
| Property | Description | Type | Default | Require |
|---|---|---|---|---|
| gutter | Content block gap (support responsive) | number | { xs?: number, sm?: number, md?: number, lg?: number, xl?: number, xxl?: number } | 0 | false |
| wrap | Allow line wrap | boolean | - | false |
| removeOnUnvisible | Do not render child Col when column is 0 | boolean | false | false |
| justify | Grid left and right alignment (valid under type=flex) | start | end | center | space-around | space-between | - | false |
| align | Grid up and down alignment (valid under type=flex) | top | middle | bottom | - | false |
| children | Col Array | Col | Array<Col> | - | true |
| component | custom row tag | React.ComponentType | - | div |
Col
| Property | Description | Type | Default | Require |
|---|---|---|---|---|
| column | The number of columns occupied by the grid (support responsive) (0 means hidden) | number | { xs?: number, sm?: number, md?: number, lg?: number, xl?: number, xxl?: number } | - | true |
| offset | The number of interval columns on the left side of the grid (support responsive) | { xxs?: number, xs?: number, md?: number, xl?: number, xxl?: number } | - | false |
| push | The number of columns to move the grid to the right (support responsive) | { xxs?: number, xs?: number, md?: number, xl?: number, xxl?: number } | - | false |
| pull | The number of columns to move the grid to the left (support responsive) | { xxs?: number, xs?: number, md?: number, xl?: number, xxl?: number } | - | false |
| order | Grid order, valid in flex layout mode (support responsive) | { xxs?: number, xs?: number, md?: number, xl?: number, xxl?: number } | - | false |
| children | Child node | React.ReactNode | - | false |