Grid
The Grid component is a flexible layout system that allows you to create responsive grid-based designs. It includes the Row and Col components to define the structure of your grid. The Row component is used to create horizontal groups of columns, while the Col component specifies the width and content of each column within a row. Together, these components enable you to build complex and adaptive layouts with ease.
Installation
Install the package
npm i @start-base/start-uiAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/start-ui/styles.css";Import the component
import Grid from '@start-base/start-ui/Grid';Usages
Grid Default
Column 1 (4/12)
Column 2 (4/12)
Column 3 (4/12)
Column 1 (6/12)
Column 2 (6/12)
Grid with Padding
Column 1 (4/12)
Column 2 (4/12)
Column 3 (4/12)
Column 1 (6/12)
Column 2 (6/12)
Grid with Responsive
Column 1 (4/12)
Column 2 (4/12)
Column 3 (4/12)
Column 1 (6/12)
Column 2 (6/12)
API
| Name | Type | Default | Variants | Description |
|---|---|---|---|---|
| children | ReactNode | Children of the Grid | ||
| span | number | Span of the Col | ||
| spanSizes | object | { lg: number, md: number, sm: number, xl: number, xxl: number } | Responsive span sizes for the Col | |
| padding | string | Padding of the Col | ||
| breakpoints | object | smMinWidth = "576px" mdMinWidth = "768px" lgMinWidth = "992px" xlMinWidth = "1200px" | smMinWidth: "--sui-sm-min-width" mdMinWidth: "--sui-md-min-width" lgMinWidth: "--sui-lg-min-width" xlMinWidth: "--sui-xl-min-width" | Breakpoints for responsive design |