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.
import "@start-base/start-ui/styles.css";Import the component
import Grid from '@start-base/start-ui/Grid';Usages
Grid Default
Grid With Custom Columns
Grid with Custom Padding & Gap
Grid with Independent Row & Column Gaps
Grid with Responsive Values
API
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | undefined | Grid items to be displayed. |
| container | boolean | false | Controls whether the Grid component is a Grid container or a Grid item. |
| className | string | undefined | Additional CSS class for the root element. |
| span | number | object | 12 | A value between 1 and 12 that will dictate how much horizontal space an item will use up. Accepts a number or an object of type ResponsiveGridValues which is explained below. |
| columns | number | object | 12 | A value that will be used to define the maximum span value. Accepts a number or an object of type ResponsiveGridValues which is explained below. |
| padding | number | object | 0 | Padding value for Grid container. Accepts a number or an object of type ResponsiveGridValues which is explained below. |
| gap | number | object | 8 | Gap between Grid items. Accepts a number or an object of type ResponsiveGridValues which is explained below. |
| rowGap | number | object | undefined | Gap between the rows of Grid items. Overrides gap. Accepts a number or an object of type ResponsiveGridValues which is explained below. |
| columnGap | number | object | undefined | Gap between the columns of Grid items. Overrides gap. Accepts a number or an object of type ResponsiveGridValues which is explained below. |
| ...props | HTMLAttributes | Additional HTML attributes for the root element. |
ResponsiveGridValues
ResponsiveGridValues allows you to pass props depending on the viewport width.
interface ResponsiveGridValues {
base: number;
sm?: number; // 576px and up
md?: number; // 768px and up
lg?: number; // 992px and up
xl?: number; // 1200px and up
xxl?: number; // 1400px and up
}base is what you would normally pass as the number to that property. Note that smaller keys cascade into larger keys if the larger keys are not specified. This means given only base and sm keys, the sm value will be used when viewport is larger than or equal to 576 pixels.