---
metaTitle: Grid component | AwesCode UI
meta:
  - name: description
    content: The <AwGrid /> component is used to render Grid layout - UI Vue component for AwesCode UI.
title: Grid
---

# Grid

**Category:** Atom | **Import:** Global

The `AwGrid` component provides a CSS Grid-based layout system with configurable columns, gaps, and alignment.

## Overview

`AwGrid` creates a responsive grid layout using CSS Grid. It supports configurable column counts, gaps, and alignment options. Children can span multiple columns using the `span` attribute.

## Usage

### Basic Example

```markup
<AwGrid :col="3" :gap="6">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</AwGrid>
```

### Responsive Columns

```markup
<AwGrid :col="{ default: 1, md: 2, lg: 3 }" :gap="4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</AwGrid>
```

### With Column Spanning

Children can span multiple columns using the `span` attribute:

```markup
<AwGrid :col="3" :gap="6">
    <div :span="2">Spans 2 columns</div>
    <div>Normal</div>
    <div>Normal</div>
</AwGrid>
```

### Responsive Spanning

Spanning can also be responsive:

```markup
<AwGrid :col="{ default: 1, md: 3 }" :gap="6">
    <div :span="{ default: 1, md: 2 }">
        Spans full width on mobile, 2 columns on desktop
    </div>
    <div>Normal</div>
</AwGrid>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| col | Number of columns or responsive object (e.g., `{ default: 1, md: 2, lg: 3 }`) | `Number` / `Object` | `false` | `1` |
| gap | Gap scale or responsive object (supports same values as AwFlow: 1-6, 8) | `Number` / `Object` | `false` | `6` |
| align | Vertical alignment within grid cells (start, center, end) | `String` | `false` | `'start'` |
| span | Column span for the grid itself (used when nesting grids) | `Number` / `Object` | `false` | `null` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Grid children | - | - |

### Events

No events are emitted by this component.

## Related Components

- `AwFlow` - Flow layout component
- `AwCard` - Card component that may use grid layouts

## Notes

- **Import Method:** Global - Available as atom component
- **Functional Component:** AwGrid is a functional component (no instance, lighter weight)
- Built on top of Tailwind's CSS Grid utilities
- **Gap values:** Accepts numbers 1-6 and 8, which map to Tailwind's gap classes (gap-1 through gap-8)
- **Responsive configuration:** Both `col` and `gap` support responsive objects
  - Use `{ default: 1, md: 2, lg: 3 }` syntax for responsive columns
  - The `default` key is used for the base (mobile) value
  - Available breakpoints: `sm`, `md`, `lg`, `xl`, `2xl`
- **Column spanning:** Children can use the `span` attribute to span multiple columns
  - Use `:span="2"` for static spanning
  - Use `:span="{ default: 1, md: 2 }"` for responsive spanning
  - The `span` attribute is automatically converted to `col-span-*` classes
- **Grid nesting:** The grid component itself can have a `span` prop when nested inside another grid
- **Alignment:** The `align` prop controls vertical alignment of items within grid cells (items-start, items-center, items-end)
- Empty nodes (whitespace, comments) are automatically filtered out
- Component always renders as a `<div>` element