A layout component that helps to create simple column-based layouts as well as more complex ones.
import { Grid } from '@backstage/ui';
<Grid />This is the grid container component. It will help to define the number of columns that will be used in the grid. You can also define the gap between the columns. All values are responsive.
| Prop | Type | Default | Responsive |
|---|---|---|---|
| columns | string | - | Yes |
| rows | string | - | Yes |
| gap | 0.511.5234567891011121314string | 4 | Yes |
| children | ReactNode | - | No |
| className | string | - | No |
| style | CSSProperties | - | No |
The grid component also accepts all the spacing props from the Box component.
| Prop | Type | Default | Responsive |
|---|---|---|---|
| p | 0.511.5234567891011121314string | - | Yes |
| px | 0.511.5234567891011121314string | - | Yes |
| py | 0.511.5234567891011121314string | - | Yes |
| pt | 0.511.5234567891011121314string | - | Yes |
| pr | 0.511.5234567891011121314string | - | Yes |
| pb | 0.511.5234567891011121314string | - | Yes |
| pl | 0.511.5234567891011121314string | - | Yes |
| m | 0.511.5234567891011121314string | - | Yes |
| mx | 0.511.5234567891011121314string | - | Yes |
| my | 0.511.5234567891011121314string | - | Yes |
| mt | 0.511.5234567891011121314string | - | Yes |
| mr | 0.511.5234567891011121314string | - | Yes |
| mb | 0.511.5234567891011121314string | - | Yes |
| ml | 0.511.5234567891011121314string | - | Yes |
Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.
bui-Gridbui-Grid[data-surface="0"]bui-Grid[data-surface="1"]bui-Grid[data-surface="2"]bui-Grid[data-surface="3"]bui-Grid[data-surface="danger"]bui-Grid[data-surface="warning"]bui-Grid[data-surface="success"]