Feature/12 column grid

[adonm]

Summary

Adds 12-column grid utility classes to the existing .grid system. Maintains backward compatibility with auto-layout grids through explicit opt-in (column classes).

Changes

• Enhanced .grid class with 12-column mode (auto-activates when col-* classes are present)
• Added column span classes: .col-1 through .col-12 and responsive .col-md-* variants

API

<!-- Mode 1: Auto-fit grid (default, no column classes) -->
<div class="grid">
  <div>Equal width</div>
  <div>Equal width</div>
</div>
<!-- Mode 2: 12-column layout (explicit spans) -->
<div class="grid">
  <div class="col-4">Sidebar (33%)</div>
  <div class="col-8">Main content (67%)</div>
</div>
<!-- Responsive: mobile-first with breakpoint overrides -->
<div class="grid">
  <div class="col-6 col-md-4">50% mobile, 33% tablet+</div>
  <div class="col-6 col-md-8">50% mobile, 67% tablet+</div>
</div>

Rationale

Aligns with Pico's minimal philosophy: two clear modes rather than mixed behaviors. Auto-fit for simple equal layouts, explicit spans for precise control.

Edge Cases

Mixed children (with and without col-*)

When a grid has both explicit and implicit children:

<div class="grid">
  <div class="col-4">Explicit (33%)</div>
  <div>Implicit (8% = 1/12)</div>
</div>

Children without col-* classes default to grid-column: auto, which behaves as span 1 (~8%) in a 12-column grid. Best practice: all children should have explicit spans in 12-column mode.

Overflow

Column spans exceeding 12 will wrap to the next row (standard CSS Grid behavior).

Limitations

Single responsive breakpoint

This implementation provides col-md-* classes for the medium (768px) breakpoint only. Pico CSS defines 5 breakpoints (sm/md/lg/xl/2xl) but additional responsive variants (col-sm-*, col-lg-*, etc.) are not included in this PR to keep the API minimal. These can be added in a follow-up if needed.

Browser Support

Uses CSS :has() selector to detect 12-column mode:

• Chrome 105+, Edge 105+
• Firefox 121+
• Safari 15.4+

Older browsers fall back to auto-fit behavior (Mode 1).

Testing

✅ All 8 visual tests passed using Playwright screenshots + Kimi k2.5 analysis:

1. Auto-fit Grid - stacked on mobile, equal columns at 768px+
2. col-6 / col-6 - 50/50 at all sizes
3. col-4 / col-4 / col-4 - 33/33/33 at all sizes
4. col-3 / col-6 / col-3 - 25/50/25 at all sizes
5. col-4 / col-8 - 33/67 at all sizes
6. Responsive col-6 col-md-4 - 50% mobile, 33% tablet+
7. Responsive col-12 col-md-6 - 100% mobile, 50% tablet+
8. Overflow col-8 + col-8 - wraps correctly

Demo

Built and tested in pages branch (see demo).

Transparency Note: I used OpenCode and Kimi k2.5 for assistance with this PR, manually reviewing and testing everything proposed.