Skip to content
Get packs

CSS Grid Layout Checker

Reviews CSS for two-dimensional layouts that should use CSS Grid and proposes fixes.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

When installed, the agent reviews stylesheets and component styles for layouts that control both rows and columns with Flexbox, floats, or hacks, and suggests converting them to CSS Grid. It can also explain Grid basics such as tracks, areas, fr units, minmax, and auto-fill versus auto-fit, and check how layouts behave across breakpoints. It is a checklist-style guide for one web best practice, not a tool that runs code.

Great for

  • Front-end developers cleaning up legacy CSS layouts
  • Designers or students learning when Grid is the better choice than Flexbox
  • Teams doing a responsive-layout review before release

Skip it if

  • Projects that do not use CSS, such as native mobile apps, where the skill gives no useful guidance
  • Simple one-dimensional layouts where Flexbox is already the right tool, since the skill may suggest unnecessary rewrites

Try asking

  • “Review this stylesheet and tell me where a Flexbox layout should be a CSS Grid layout.”
  • “Explain grid-template-areas and fr units with a small example for my dashboard.”
  • “Check my product card grid across mobile, tablet and desktop breakpoints and flag issues.”
  • “Convert this float-based two-column page layout to CSS Grid.”
Step-by-step guide: how to use CSS Grid Layout CheckerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    css-grid.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip css-grid.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip css-grid.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste the relevant CSS and the HTML structure so the agent can judge rows and columns together.
  • Name the breakpoints and browsers you care about so the review checks the rendered result, not just the code.
  • Treat suggested rewrites as proposals and test them in a browser before merging.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.