メニュー
Use when laying out a page or component, choosing between CSS Grid and Flexbox, setting up a column grid, aligning nested components to a parent grid, or building responsive card/dashboard layouts.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when work context must transfer to another session or person. Triggers: create a handoff, hand off this work, summarize context for the next session, prepare a handoff.
Use when a result, experiment, or analysis must be reproducible by others or by a future session. Triggers: make this reproducible, capture provenance, pin the environment for this result, why can't I reproduce X.
Use when research or scientific code must be trustworthy — verifiably correct, regression-safe, and numerically stable. Triggers: harden this code, is this numerically correct, add regression tests vs known results, make the research code robust.
Use when an approved implementation plan (a docs/rse/specs/plan-*.md file) exists and the next step is writing the code. Triggers: implement the plan, execute the plan, start building, run the plan.
Use when an existing implementation plan needs changes before or during execution. Triggers: update the plan, change the plan, add a phase, revise scope, incorporate experiment results.
Use when a feature, refactor, or multi-file change needs to be designed before coding. Triggers: plan X, design the implementation, how should we build X, create an implementation plan.
| name | grid-layout-systems |
| description | Use when laying out a page or component, choosing between CSS Grid and Flexbox, setting up a column grid, aligning nested components to a parent grid, or building responsive card/dashboard layouts. |
| metadata | {"references":["references/grid-patterns.md","references/responsive-strategies.md","references/spacing-systems.md"]} |
| Need | Use |
|---|---|
| 2D page layout (rows + columns) | CSS Grid |
| 1D component layout (row OR column) | Flexbox |
| Nested element aligned to parent grid | grid-template-columns: subgrid |
| Auto-reflowing card grid (no breakpoints) | Grid + auto-fit minmax() |
| Component responsive to container, not viewport | Container queries |
--gap, --max-width, spacing scale (see Spacing).repeat(N, 1fr).auto-fit minmax() over breakpoints; fall back to @media (min-width: ...) for structural changes..container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.content { grid-column: span 8; }
.sidebar { grid-column: span 4; }
.hero { grid-column: 1 / -1; }
.narrow { grid-column: 3 / 11; }
.page {
display: grid;
grid-template-columns: 240px 1fr 300px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
/* auto-fit: empty tracks collapse; auto-fill: empty tracks preserved */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: 24px;
}
.page { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.card-group {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
}
.card { grid-column: span 4; }
/* Navbar */
.navbar { display: flex; align-items: center; justify-content: space-between; }
/* Card with footer pinned to bottom */
.card { display: flex; flex-direction: column; height: 100%; }
.card-body { flex: 1; }
.card-footer { margin-top: auto; }
/* Centering */
.center { display: grid; place-items: center; }
.card-container { container-type: inline-size; container-name: card; }
@container card (min-width: 400px) {
.card { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
}
@container card (max-width: 399px) {
.card { display: flex; flex-direction: column; }
}
:root {
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
}
auto-fit grid reflow without breakpoints.