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.

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.