PolymathUI

Built with

Grid

PropertyTypeRequiredDefaultDescription
themeAnyfalse-
asEnumfalse-Typing Note: prefer using .withComponent for now as it is actually type-safe. String types need to be cast to themselves to become literal types (as={'a' as 'a'}).

Basic usage

In its normal form, Grid accepts basic css-grid properties.

First block
Second block

12-columns Grid system

"Bootstrap-style" 12-columns grid is being used in the design. To achieve it you can use the GridRow component. The main difference with the classic Bootstrap grid is that GridRow is a global container for your grid, not only a row (so, then the name is not really accurate but could not find better).

Important

  • — You can have defined any number of rows in a GridRow, just keep adding some Grid.Col.
  • — Grid.Col and its gridSpan prop is just a helper for the native css-grid grid-column property.

Row 1 - First block
Row 1 - Second block
Row 2 - First block
Row 2 - Second block

You can see that the grid-gap is doing the job for you. No margin-top/bottom in the children. Your grid is consistent and your vertical flow is managed automatically.

Responsive

As with every primitives, you can pass an array to the props to handle responsive (try resizing your browser):

Row 1 - First block
Row 1 - Second block
Row 2 - First block
Row 2 - Second block

Span

To span (leave an empty space) between two columns, you use the native grid-column css property:

Row 1 - First block
Row 1 - Second block