PUGrid Component
A flexible, responsive, hand-drawn style grid system for building complex layouts with ease.
Usage
Basic Usage
Item 1
Item 2
Item 3
Responsive Grid
Item 1
Item 2
Item 3
Item 4
Grid with Span
Large item (2 columns)
Small item
Small item
Full width item (4 columns)
Grid with Alignment
Top aligned
Centered
Bottom aligned
Complex Grid
Header
Menu
Sidebar
Content
Widget
Footer
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| cols | number | string | No | 1 | Number of columns or grid-template-columns value |
| rows | number | string | No | auto | Number of rows or grid-template-rows value |
| gap | none | small | medium | large | No | medium | Spacing between grid items |
| alignment | start | center | end | stretch | No | stretch | Vertical alignment of items |
| justify | start | center | end | space-between | space-around | space-evenly | No | start | Horizontal alignment of items |
| responsive | boolean | No | true | Enable responsive grid columns |
| customClass | string | No | '' | Custom CSS classes |
PUGridItem Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| colStart | number | No | - | Grid column start |
| colEnd | number | No | - | Grid column end |
| rowStart | number | No | - | Grid row start |
| rowEnd | number | No | - | Grid row end |
| colSpan | number | No | - | Number of columns to span |
| rowSpan | number | No | - | Number of rows to span |
| alignment | start | center | end | stretch | No | stretch | Vertical alignment of the item |
| justify | start | center | end | stretch | No | stretch | Horizontal alignment of the item |
| customClass | string | No | '' | Custom CSS classes |
Features
- Hand-drawn style borders and organic visual effects
- Responsive: adapts to different screen sizes
- Flexible: supports complex grid templates
- Animations: smooth entry and hover effects
- Dark mode support
- Accessible: semantic structure and keyboard navigation
Advanced Examples
12-column grid
<PUGrid cols="repeat(12, 1fr)" gap="medium">
<PUGridItem :col-span="8">Main content</PUGridItem>
<PUGridItem :col-span="4">Sidebar</PUGridItem>
</PUGrid>
Fixed size columns
<PUGrid cols="200px 1fr 200px" gap="large">
<PUGridItem>Left sidebar</PUGridItem>
<PUGridItem>Content</PUGridItem>
<PUGridItem>Right sidebar</PUGridItem>
</PUGrid>
Masonry grid
<PUGrid cols="repeat(auto-fill, minmax(250px, 1fr))" gap="medium">
<PUGridItem v-for="i in 6" :key="i" :row-span="i % 2 === 0 ? 2 : 1">
Item {{ i }}
</PUGridItem>
</PUGrid>
Dependencies
- Tailwind CSS for styling
- Vue 3 Composition API