---
name: website-grid
description: "Build or revise a website with a strict, responsive grid and no gutters between layout cells. Use when a task explicitly calls for a gutterless grid, shared alignment or correcting layout drift. Covers page structure and alignment, not unrelated visual redesign."
---

# Website grid

Make the grid a real layout constraint, not an invisible suggestion. When this skill applies, major sections and their contents must use shared column lines. Keep the requested visual identity and scope; adding this skill to a project does not authorize redesigning unrelated pages.

## Define one layout system

Inspect the existing layout before editing. Define shared values for the outer content width, page inset, column count and internal cell padding. Reuse the site's existing values when they support the requested grid.

Use a single grid definition for the header, main sections and footer. Their content edges and column boundaries must agree at each breakpoint. A full-width background can extend beyond the content container without moving its content off the grid.

For a new layout without an established system, 12 columns on wide screens, 6 at intermediate widths and 4 on narrow screens are a useful starting point, not a requirement. Choose breakpoints where the actual content stops fitting.

## No gutters

Set both column and row gaps to zero on the page layout grid. Adjacent layout cells meet at their shared boundary. Remove framework gutter defaults, compensating negative margins and item margins that recreate gaps between those cells.

**No gutters does not mean no breathing room.** Put readable spacing inside cells using shared padding values. Align equivalent text blocks to the same padded content lines. Use normal spacing inside controls and components; do not apply zero gap indiscriminately to every nested layout.

If cells have borders, use one divider at each shared edge rather than doubling adjacent borders. Visible grid lines are optional; do not add an overlay or a boxed visual style unless requested.

## Keep elements attached to the grid

- Place major content with column starts and spans. Avoid unrelated percentage widths or one-off maximum widths that make sections drift apart.
- Derive nested layouts from their parent tracks. Use a shared definition or a column subgrid where appropriate; do not restart a slightly different grid inside each section.
- Align headings, body text, images, form fields and action groups to deliberate cell or padded content edges. A narrower reading measure can occupy a smaller grid span.
- Span images and cards across complete tracks. Crop media inside its assigned area rather than stretching it or nudging it across boundaries.
- Use shared spacing values for vertical rhythm. Adjacent cells meant to form a row should share that row's boundaries; allow content to determine height rather than truncating text to force equality.
- Do not repair structural misalignment with arbitrary offsets, transforms, absolute positioning or extra whitespace. Fix the container, track, span or padding that caused it. Internal icon alignment and deliberate decorative positioning can still need local adjustments.

## Responsive implementation

Use flexible tracks such as `repeat(var(--columns), minmax(0, 1fr))`. Set `min-width: 0` on grid children where intrinsic content would otherwise force overflow. Explicitly update spans when the column count changes; do not leave desktop column assignments creating implicit tracks on mobile.

Stack content in a meaningful reading order as space narrows. Keep the same outer inset and content-padding rules across sections. Preserve the DOM order for reading and keyboard navigation rather than visually rearranging an unrelated source order.

Let long labels, URLs and text wrap. Give media flexible dimensions. Keep intentional table scrolling within the table's own region; do not hide page overflow as a substitute for fixing the layout. Grid discipline must not make content or controls unavailable at zoom or narrow widths.

## Verify alignment

Inspect representative pages at desktop, intermediate and phone widths, including widths between breakpoints. Check long content and zoom as well as the ideal sample.

Compare the actual left and right edges of the header, section boundaries, columns, text insets and footer. Use browser grid tools or a temporary development overlay to find drift; remove any temporary overlay from the published interface.

Confirm that layout gaps are zero, equivalent padding matches, spans stay within the defined tracks and the page has no unintended horizontal scrolling. Check that focus indicators, labels and controls remain visible and usable.

Report any deliberate grid exception and why it is needed. If browser inspection is unavailable, state that limitation rather than claiming the finished page was visually verified.

## Technical references

These sources explain the implementation and accessibility constraints; the choice to use a gutterless grid is this skill's design policy, not a web-standard requirement.

- [MDN: grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns) — track definitions and subgrid.
- [MDN: gap](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/gap) — spacing between grid tracks.
- [W3C: Understanding reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html) — readable, operable content at narrow widths and zoom, including the data-table exception.