Grids
Flex grids use flexbox to position columns within rows.
This should help you visualize the columns. The grey dotted box is the grid and the orange dotted boxes are the columns.
ReferenceError: React is not definedYou can create a flex grid with and without gutters. To remove gutters, set the gutter prop to false or use the .grid-nogutter class. Here are examples of what each would look like.
ReferenceError: React is not definedSet the justifyContent prop on a Grid to control spacing around and between inner FlexCols.
ReferenceError: React is not definedUsing the col prop on a FlexCol or the col-{n} classes, you can create a basic grid system by specifying the width of each column out of 24.
ReferenceError: React is not definedYou can also specify how the columns grow with the grow={n} prop or the col-grow-{n} classes (n = 2 - 11). These columns will attempt to respect their given ratio until the content of the column exceeds their parameters, after which the column will drop onto another row:
ReferenceError: React is not definedYou can fix the width of a column by using the fixed prop or the .col-fixed class.
ReferenceError: React is not definedYou can specify three different media breakpoints with the breakpoint prop or the .col-sm, .col-md, and .col-lg classes.
ReferenceError: React is not definedAligning columns relative to the grid:
ReferenceError: React is not definedAligning content relative to the column it is in
ReferenceError: React is not definedProps
Grid props
| Property | Required | Type | Default | Description |
|---|---|---|---|---|
gutter | no | boolean | true | When true, adds spacing between FlexCols |
flexDirection | no | oneOf(['row', 'row-reverse', 'column', 'column-reverse']) | Sets the flex direction | |
justifyContent | no | oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly']) | Sets the justify-content CSS property |
FlexCol props
| Property | Required | Type | Default | Description |
|---|---|---|---|---|
alignment | no | oneOf(['top', 'middle', 'bottom']) | Alignment of the column within the Grid | |
breakpoint | no | oneOf(['sm', 'md', 'lg']) | Width of window at which column will expand to take up full width of Grid (sm = 768px, md = 992px, lg = 1200px) | |
col | no | number | Fraction out of 24 that this column's width should be in its Grid | |
contentAlignment | no | oneOf(['top', 'middle', 'bottom']) | Alignment of the column's contents within itself | |
fixed | no | boolean | false | When true, column width is fixed to the width of its content |
grow | no | number | 1 | The ratio of the column's width relative to other columns in the same Grid |
Imports
Import React components (including CSS):
import {Grid, FlexCol} from 'pivotal-ui/react/flex-grids';Import CSS only:
import 'pivotal-ui/css/flex-grids';