---
title: "Layout Grid - Air Market"
description: "Before you place content, the page needs a structure everything can sit on. This defines that structure: the columns, the gaps between them, the margins at the edges, and what happens as the screen c…"
canonical: "https://airmarket.ai/app/layout-grid"
---

[Air Market](/) / [Design](/category/design) / Layout Grid

Skill by [MC Dean](/@owl-listener)

# Layout Grid

Set the bones of the page before you place anything on it

## What this does

Before you place content, the page needs a structure everything can sit on. This defines that structure: the columns, the gaps between them, the margins at the edges, and what happens as the screen changes size. Reach for it when you are setting up page structure. Spacing inside components and cross-device behaviour have their own skills.

### Top 3 things it does for you

- Define columns, gutters and margins
- Decide how the grid behaves at each breakpoint
- Establish the structure of a page

## Information

**Layout Grid at a glance**

|  |  |
| --- | --- |
| Kind | Skill |
| Publisher | [MC Dean](/@owl-listener) |
| Category | [Design](/category/design) |
| Works with | Agent Skills - an open standard supported by 40+ agents |
| Size | 2 KB |
| Licence | MIT |
| Repository | [Owl-Listener/designer-skills](https://github.com/Owl-Listener/designer-skills/tree/20e34c4a587e5eb09fcdf8351fa97b3ad761b31e/ui-design/skills/layout-grid) |
| GitHub stars | 2,144 (as of Nov 2026) |

## Security report

**Verified.** AIR scanned this exact version of Layout Grid and flagged nothing. AIR's verdict: **safe**.

**What Layout Grid's check was run against**

|  |  |
| --- | --- |
| Commit | 20e34c4a587e5eb09fcdf8351fa97b3ad761b31e |
| Content hash | d64a22e8fcc909954c812b65849e012d658618ad0e8b3466522057d9cbc0299f |
| Files read | [Browse the files at this exact commit](https://github.com/Owl-Listener/designer-skills/blob/20e34c4a587e5eb09fcdf8351fa97b3ad761b31e/ui-design/skills/layout-grid/SKILL.md) |

A scan is named by the exact content it read, not by a version number. A different version is a different artifact, and nothing here applies to a version AIR has not scanned.

[Read the full security report for Layout Grid](/security/layout-grid)

## About Layout Grid

This defines a responsive grid: the columns, gutters, margins, and how the grid behaves at breakpoints.

Use it when establishing page structure. For the spacing scale inside components, use spacing-system; for cross-device behaviour, use responsive-design.

## What's inside

- SKILL.md - instructions

## Questions

### Is Layout Grid safe to install?

AIR scanned this exact version of Layout Grid and flagged nothing. AIR's verdict: safe. The verdict is named by the content that was read, at commit 20e34c4a587e, so it cannot drift onto a version nobody scanned. The full report is at https://airmarket.ai/security/layout-grid.

### How do I install Layout Grid?

Open https://airmarket.ai/app/layout-grid on Air Market and use the install action: Air Market hands Claude a prompt naming this exact skill, and Claude sets it up. Source, pinned to the exact commit this listing describes: https://github.com/Owl-Listener/designer-skills/tree/20e34c4a587e5eb09fcdf8351fa97b3ad761b31e/ui-design/skills/layout-grid. Install from that link, not the branch.

## Related on Air Market

- [More Design listings](/category/design)
- [Everything by MC Dean](/@owl-listener)

---

Canonical URL: <https://airmarket.ai/app/layout-grid>