Skip to main content

Pivotal UI

v19.2.2

Grids

Flex grids use flexbox to position columns within rows.

Outlining the grid

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 defined
Gutters

You 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 defined
Justify content within a grid

Set the justifyContent prop on a Grid to control spacing around and between inner FlexCols.

ReferenceError: React is not defined
Sizing

Using 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 defined
Dynamic column growth

You 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 defined
Fixing column sizing

You can fix the width of a column by using the fixed prop or the .col-fixed class.

ReferenceError: React is not defined
Breakpoints

You can specify three different media breakpoints with the breakpoint prop or the .col-sm, .col-md, and .col-lg classes.

ReferenceError: React is not defined
Alignment

Aligning columns relative to the grid:

ReferenceError: React is not defined
Relative alignment

Aligning content relative to the column it is in

ReferenceError: React is not defined

Props

Grid props

PropertyRequiredTypeDefaultDescription
gutternobooleantrueWhen true, adds spacing between FlexCols
flexDirectionnooneOf(['row', 'row-reverse', 'column', 'column-reverse'])Sets the flex direction
justifyContentnooneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'])Sets the justify-content CSS property

FlexCol props

PropertyRequiredTypeDefaultDescription
alignmentnooneOf(['top', 'middle', 'bottom'])Alignment of the column within the Grid
breakpointnooneOf(['sm', 'md', 'lg'])Width of window at which column will expand to take up full width of Grid (sm = 768px, md = 992px, lg = 1200px)
colnonumberFraction out of 24 that this column's width should be in its Grid
contentAlignmentnooneOf(['top', 'middle', 'bottom'])Alignment of the column's contents within itself
fixednobooleanfalseWhen true, column width is fixed to the width of its content
grownonumber1The 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';