Grid
A 24-column grid system for creating complex responsive layouts.
Basic Grid
A simple grid with various spans.
col-24
col-12
col-12
col-8
col-8
col-8
<prism-row>
<prism-col [span]="24">100%</prism-col>
</prism-row>
<prism-row>
<prism-col [span]="12">50%</prism-col>
<prism-col [span]="12">50%</prism-col>
</prism-row>Column Spacing
Gutter spacing between columns.
col-6
col-6
col-6
col-6
<prism-row [gutter]="16">
<prism-col [span]="6">col-6</prism-col>
<prism-col [span]="6">col-6</prism-col>
<prism-col [span]="6">col-6</prism-col>
<prism-col [span]="6">col-6</prism-col>
</prism-row>Column Offset
Offset columns to create gaps.
col-8
col-8 offset-8
<prism-row>
<prism-col [span]="8">col-8</prism-col>
<prism-col [span]="8" [offset]="8">col-8 offset-8</prism-col>
</prism-row>Responsive
Responsive layout based on screen width.
Col
Col
Col
Col
<prism-row>
<prism-col [xs]="24" [sm]="12" [md]="8" [lg]="6">Responsive Col</prism-col>
<prism-col [xs]="24" [sm]="12" [md]="8" [lg]="6">Responsive Col</prism-col>
</prism-row>Responsive Object
Advanced responsive configuration using objects.
Col
Col
<prism-row>
<prism-col [xs]="{ span: 24 }" [lg]="{ span: 6, offset: 2 }">
Col with offset on large screens
</prism-col>
<prism-col [xs]="{ span: 24 }" [lg]="{ span: 6, offset: 2 }">
Col with offset on large screens
</prism-col>
</prism-row>Alignment
Flex alignment options.
Center / Middle
Center Middle
Space Between
Start
End
<prism-row justify="center" align="middle" style="height: 100px; background: #eee;">
<prism-col [span]="4">Center Middle</prism-col>
</prism-row>
<prism-row justify="space-between">
<prism-col [span]="4">Start</prism-col>
<prism-col [span]="4">End</prism-col>
</prism-row>PrismRow API
| Name | Type | Default | Description |
|---|---|---|---|
gutter | number | [number, number] | 0 | Gutter between columns, you can set [horizontal, vertical] gutter. |
justify | 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'start' | Horizontal arrangement of the layout. |
align | 'top' | 'middle' | 'bottom' | 'top' | Vertical arrangement of the layout. |
PrismCol API
| Name | Type | Default | Description |
|---|---|---|---|
span | number | - | The number of cells to occupy (0-24). |
offset | number | 0 | The number of cells to offset from the left. |
order | number | 0 | Raster order. |
xs | number | { span, offset, order } | - | <576px responsive columns. |
sm | number | { span, offset, order } | - | >=576px responsive columns. |
md | number | { span, offset, order } | - | >=768px responsive columns. |
lg | number | { span, offset, order } | - | >=992px responsive columns. |
xl | number | { span, offset, order } | - | >=1200px responsive columns. |
xxl | number | { span, offset, order } | - | >=1600px responsive columns. |