AutoGineer
Generated banner for Framed Grid Layout
Generated logo for Framed Grid Layout

Framed Grid Layout

Meng ToCommunityCreated by Meng To

  • Skill
  • Guidelines
  • Design and creative
  • MIT
  • Medium risk
Download ZIP

From the author

Create minimal framed grid layouts with thin visible boundary lines, L-shaped corner brackets, subtle diagonal line texture, and strict section alignment. Use when asked for clean, neutral, precise, structured, editorial, technical, or guide-border web layouts.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The Framed Grid Layout skill provides a set of design principles and CSS implementation patterns for building clean, editorial-style interfaces. It focuses on strict grid alignment, thin boundary lines, and subtle textural details to achieve a precise, system-like aesthetic. By utilizing a consistent spacing scale and specific CSS tokens, it ensures that all sections maintain a unified look, making it ideal for technical documentation, dashboards, or editorial web projects that require a structured, guide-border appearance.

What it does

  • Defines a CSS grid-based structure for consistent section alignment.
  • Provides CSS tokens for uniform colors, spacing, and line weights.
  • Implements L-shaped corner brackets using background gradients.
  • Adds subtle diagonal background textures for surface depth.
  • Establishes rules for maintaining visual rhythm and border consistency.
  • Includes responsive grid span classes for desktop and mobile layouts.

When to use it

  • When building technical documentation or data-heavy dashboards.
  • When a project requires a clean, editorial, or system-oriented aesthetic.
  • When you need to enforce strict alignment across diverse content sections.
  • When the design calls for thin, precise borders and guide-like structures.

Advantages

  • Promotes high visual consistency across different page sections.
  • Reduces design clutter by relying on structural lines rather than heavy shadows.
  • Provides a clear, modular approach to layout development.
  • Ensures responsive behavior through defined grid span classes.

Usage examples

“Create a dashboard layout for a technical report using the framed grid system.”
The agent generates an HTML structure using the .framed-grid class, applying .frame and .frame-brackets to sections to ensure a uniform, technical appearance.
“How should I structure a two-column layout for a guide page?”
The agent provides a code snippet using the .span-6 classes within the .framed-grid container, ensuring both columns align perfectly to the parent grid.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/mengto/framed-grid-layout/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip framed-grid-layout.zip -d .agents/skills

Documentation by Meng To

Framed Grid Layout

Use When

  • A page needs a clean technical structure with visible section boundaries.

  • Content should feel precise, organized, editorial, or system-like.

  • The design calls for thin guide borders, L-shaped corner brackets, and consistent framed boxes.

Layout Rules

  1. Define the parent grid first; make every section snap to the same columns and rows.

  2. Use one border color, one corner bracket color, and one spacing scale across the page.

  3. Keep frames rectangular and precise. Avoid floating cards, soft blobs, and uneven margins.

  4. Use thin lines: 1px borders, low-contrast dividers, and subtle bracket marks.

  5. Add diagonal background texture at very low opacity; it should read only as surface tension.

  6. Align section padding, headings, controls, and media edges to the same grid rhythm.

  7. Separate sections with consistent gaps, not random whitespace.

Base Tokens

Use neutral colors and tune contrast per theme.

:root {
  --fg-bg: #f7f7f4;
  --fg-surface: rgba(255, 255, 255, 0.62);
  --fg-line: rgba(24, 24, 27, 0.14);
  --fg-line-strong: rgba(24, 24, 27, 0.34);
  --fg-texture: rgba(24, 24, 27, 0.035);
  --fg-gap: 16px;
  --fg-pad: clamp(16px, 2vw, 28px);
  --fg-corner: 18px;
}

Parent Grid

Use the parent grid to enforce vertical and horizontal alignment.

.framed-grid {
  min-height: 100vh;
  padding: var(--fg-gap);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 11px,
      var(--fg-texture) 11px 12px
    ),
    var(--fg-bg);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--fg-gap);
}

.framed-grid > * {
  min-width: 0;
}

Framed Section

Each section gets the same box model, line weight, and padding.

.frame {
  position: relative;
  border: 1px solid var(--fg-line);
  background: var(--fg-surface);
  padding: var(--fg-pad);
  overflow: hidden;
}

.frame + .frame {
  margin-top: 0;
}

L-Shaped Corner Brackets

Use background layers so brackets stay crisp without extra markup.

.frame-brackets {
  background:
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left top / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left top / 1px var(--fg-corner) no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right top / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right top / 1px var(--fg-corner) no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left bottom / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left bottom / 1px var(--fg-corner) no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right bottom / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right bottom / 1px var(--fg-corner) no-repeat,
    var(--fg-surface);
}

Section Spans

Prefer explicit grid spans over ad hoc widths.

.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }

@media (max-width: 760px) {
  .framed-grid {
    grid-template-columns: 1fr;
  }

  .span-12,
  .span-8,
  .span-6,
  .span-4 {
    grid-column: 1 / -1;
  }
}

Example

<main class="framed-grid">
  <section class="frame frame-brackets span-12">...</section>
  <section class="frame frame-brackets span-8">...</section>
  <aside class="frame frame-brackets span-4">...</aside>
  <section class="frame frame-brackets span-6">...</section>
  <section class="frame frame-brackets span-6">...</section>
</main>

Taste Rules

  • Keep frames aligned to the parent grid even when content inside varies.

  • Use square or lightly rounded corners only if the product style requires it.

  • Do not mix different border weights in adjacent frames.

  • Do not add heavy shadows; the visible frame is the structure.

  • Keep diagonal texture below 0.05 opacity.

  • Repeat corner bracket size consistently across all major sections.

Quick Checks

  • Section edges line up vertically and horizontally.

  • Every frame uses the same border, padding, and corner bracket scale.

  • Gaps between frames are consistent on desktop and mobile.

  • The diagonal texture is visible only on close inspection.

  • The layout still reads clearly if the texture layer is removed.

Files

LICENSE

MIT License

Copyright (c) 2026 Meng To

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

What our scanner noticed· Medium risk

  • Large base64-encoded blobs

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/framed-grid-layout · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download framed-grid-layout.zip