Sections and Footer get a Gap, three fields across

The room between a band's columns: gap-8 in a two-column section, gap-x-24
gap-y-10 in the footer. Both were written into the template that drew them.

The canvas now SKIPS a utility nothing has chosen instead of stripping it. The
old rule lied twice — a section's own padding vanished while the panel was open,
and a band with no chosen gap lost the site's default.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/sections/SpacingTab.tsx

@@ -46,6 +46,7 @@ const BANDS = [
     fields: [
       { key: 'paddingX' as const, label: 'Horizontal padding' },
       { key: 'paddingY' as const, label: 'Vertical padding' },
+      { key: 'gap' as const, label: 'Gap' },
     ],
   },
   {
@@ -54,6 +55,7 @@ const BANDS = [
     fields: [
       { key: 'paddingX' as const, label: 'Horizontal padding' },
       { key: 'marginTop' as const, label: 'Margin top' },
+      { key: 'gap' as const, label: 'Gap' },
     ],
   },
 ];
@@ -94,7 +96,9 @@ export const SpacingTab = ({
       {BANDS.map((band) => (
         <div key={band.key} className="flex flex-col gap-2">
           <h4 className="text-xs font-medium">{band.label}</h4>
-          <div className="grid grid-cols-1 gap-3 @[20rem]:grid-cols-2">
+          {/* Three across, and the same grid for every band — Top Nav has two fields and leaves the
+              third empty, so the columns line up down the section rather than staggering. */}
+          <div className="grid grid-cols-1 gap-3 @[26rem]:grid-cols-3">
             {band.fields.map((field) => {
               const current = (spacing as Record<string, Record<string, Steps> | undefined>)[band.key]?.[field.key];
               const own = current?.[key];