Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →When the user wants to design, optimize, or audit grid layouts for content display. Also use when the user mentions "grid layout," "grid design," "multi-column grid," "CSS grid," "responsive grid," "card grid," "product grid," or "feature grid." For cards layout, use card.
.claude/skills/kostja94-grid/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | -29% | 0% |
| case-08 | ✗→✓ | ▲ Improved | 3% | 0% |
| case-09 | ✗→✓ | ▲ Improved | -4% | 0% |
| case-10 | ✗→✓ | ▲ Improved | -7% | 0% |
| case-17 | ✗→✓ | ▲ Improved | 26% | 0% |
Guides grid layout design for equal-hierarchy, multi-column content display. Grids display multiple items with equal emphasis; space-efficient and scannable. Used for products, templates, tools, features, blog indexes, and galleries.
When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
| Use grid when | Use list when | |---------------|---------------| | Visual content (images, thumbnails) | Text-heavy; scan by title | | Equal emphasis across items | Compact; many items; dense info | | Products, templates, gallery, features | Blog index, docs, search results | | Browsing, discovery | Reading, scanning |
See list for list layout; card for card structure within grid.
| Element | Purpose | |---------|---------| | Columns | 1–4+ columns; adapt to viewport | | Gap | Consistent spacing between items | | Items | Equal or proportional sizing | | Responsive | 1 col mobile → 2–4 cols desktop |
repeat(auto-fill, minmax(min, 1fr)) or repeat(auto-fit, minmax()) for fluid columns| Principle | Practice | |-----------|----------| | Equal hierarchy | Items compete equally; no single dominant item | | Consistent sizing | Same card/item dimensions in grid | | Gap consistency | Uniform gap (e.g., 16px, 24px) | | No layout shift | Reserve space for images; avoid CLS |
If using infinite scroll with grid: crawlers cannot access content loaded on scroll. Provide paginated component pages for SEO-critical content. See site-crawlability for search-friendly implementation.
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-13 | pass→pass | 9,561 | 8,801 | -8% | 1 | 1 | 0% | 1,848 | 2,408 | +30% | 0 | 0 | — |
case-20 | pass→pass | 8,782 | 7,726 | -12% | 1 | 1 | 0% | 1,667 | 1,952 | +17% | 0 | 0 | — |
case-01 | fail→pass | 19,263 | 10,037 | -48% | 1 | 1 | 0% | 3,704 | 2,629 | -29% | 0 | 0 | — |
case-02 | pass→pass | 9,232 | 9,016 | -2% | 1 | 1 | 0% | 1,669 | 2,297 | +38% | 0 | 0 | — |
case-03 | pass→pass | 9,513 | 8,433 | -11% | 1 | 1 | 0% | 1,602 | 1,973 | +23% | 0 | 0 | — |
case-04 | pass→pass | 9,835 | 6,265 | -36% | 1 | 1 | 0% | 1,536 | 1,749 | +14% | 0 | 0 | — |
case-05 | pass→pass | 13,130 | 9,889 | -25% | 1 | 1 | 0% | 2,187 | 2,397 | +10% | 0 | 0 | — |
case-06 | pass→pass | 8,857 | 3,255 | -63% | 1 | 1 | 0% | 1,366 | 1,165 | -15% | 0 | 0 | — |
case-07 | fail→fail | 13,125 | 12,494 | -5% | 1 | 1 | 0% | 2,443 | 2,953 | +21% | 0 | 0 | — |
case-08 | fail→pass | 11,831 | 8,350 | -29% | 1 | 1 | 0% | 1,942 | 1,996 | +3% | 0 | 0 | — |
case-09 | fail→pass | 14,519 | 10,212 | -30% | 1 | 1 | 0% | 2,529 | 2,436 | -4% | 0 | 0 | — |
case-10 | fail→pass | 8,780 | 4,793 | -45% | 1 | 1 | 0% | 1,650 | 1,537 | -7% | 0 | 0 | — |
case-11 | pass→pass | 10,574 | 8,260 | -22% | 1 | 1 | 0% | 1,785 | 2,017 | +13% | 0 | 0 | — |
case-12 | pass→pass | 9,612 | 6,545 | -32% | 1 | 1 | 0% | 1,771 | 1,694 | -4% | 0 | 0 | — |
case-14 | fail→fail | 8,249 | 5,287 | -36% | 1 | 1 | 0% | 1,585 | 1,692 | +7% | 0 | 0 | — |
case-15 | pass→pass | 11,599 | 10,218 | -12% | 1 | 1 | 0% | 2,074 | 2,549 | +23% | 0 | 0 | — |
case-16 | pass→pass | 15,878 | 10,856 | -32% | 1 | 1 | 0% | 3,353 | 2,692 | -20% | 0 | 0 | — |
case-17 | fail→pass | 10,795 | 9,554 | -11% | 1 | 1 | 0% | 2,016 | 2,531 | +26% | 0 | 0 | — |
case-18 | fail→pass | 6,619 | 2,358 | -64% | 1 | 1 | 0% | 1,174 | 1,177 | +0% | 0 | 0 | — |
case-19 | pass→pass | 13,164 | 7,888 | -40% | 1 | 1 | 0% | 2,424 | 2,062 | -15% | 0 | 0 | — |
case-21 | pass→pass | 16,876 | 10,353 | -39% | 1 | 1 | 0% | 3,412 | 2,713 | -20% | 0 | 0 | — |
case-22 | pass→pass | 12,283 | 10,039 | -18% | 1 | 1 | 0% | 2,395 | 2,712 | +13% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +27 percentage points is the difference between those two pass rates over the 22 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.