Grid
Description
The Grid component is a versatile layout tool that allows for organizing content in either a traditional grid or a masonry-style layout. It offers customizable column configurations and gap sizes, making it suitable for various content presentation needs.
Installation
sabaccui add grid
Usage
Here are examples of how to use the Grid component with different configurations:
Basic 2-column grid layout:
Preview
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Masonry layout with 3 columns:
Preview
Explore our latest collection
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Schema
| Field | Type | Description | Default |
|---|---|---|---|
content | bloks | An array of nested components to be displayed within the grid | - |
mode | option | The layout mode of the grid. Options: grid, masonry | grid |
cols | option | Number of columns in the grid. Options: 2cols (1-2-2-2), 3cols (1-2-3-3), 4cols (1-2-4-4) | - |
gap | option | The gap size between grid items. Options: 4, 6, 8, 16, 32, 48 | 6 |
header | text | Optional header text for the grid | - |
intro | markdown | Optional introductory text for the grid | - |
Notes
- The component uses Tailwind CSS classes for responsive design and layout.
- The masonry layout is achieved using CSS columns.
- The grid layout uses CSS Grid for more traditional layouts.
- The component includes optional header and intro sections that can be used to provide context for the grid content.
Best Practices:
- Choose the appropriate mode (
gridormasonry) based on your content type and desired visual effect. - Consider the amount and type of content when selecting the number of columns and gap size.
- Use the optional header and intro fields to provide context and improve the user experience.
- Ensure that the content components placed within the grid are designed to work well in various column widths and layouts.