Add the feed canonical layout

Plan step 35: <x-feed min-item gap>, following the reference's feed rules
- one column below medium, then as many equal columns of at least the
minimum item width as the feed has room for, 24px apart from medium,
items in their source order.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

tests/Browser/LayoutTest.php

@@ -386,3 +386,24 @@ it('docks the supporting pane as a bottom sheet below expanded, opened and close
         ->assertScript(layoutRect(SUPPORTING_SIDE, 'width').' === 360')
         ->assertNoJavaScriptErrors();
 });
+
+it('lays a feed out in one column below medium and in columns of its minimum width from it, in order', function () {
+    $body = '<x-feed id="feed" min-item="240px">'
+        .collect(range(1, 6))->map(fn (int $item): string => "<article id=\"item-{$item}\">Item {$item}</article>")->implode('')
+        .'</x-feed>';
+
+    layoutPage($body, 599)
+        ->assertScript(layoutColumns('#feed').' === 1')
+        ->assertScript(layoutStyle('#feed', 'rowGap')." === '16px'");
+
+    // 600px, less no margins, fits two 240px columns with M3's 24px spacer between them.
+    layoutPage($body, 600)
+        ->assertScript(layoutColumns('#feed').' === 2')
+        ->assertScript(layoutStyle('#feed', 'columnGap')." === '24px'")
+        ->assertScript(layoutRect('#item-2', 'left').' > '.layoutRect('#item-1', 'left'))
+        ->assertScript(layoutRect('#item-3', 'top').' > '.layoutRect('#item-1', 'top'));
+
+    layoutPage($body, 1200)
+        ->assertScript(layoutColumns('#feed').' === 4')
+        ->assertScript(layoutRect('#item-5', 'left').' === '.layoutRect('#item-1', 'left'));
+});