Add the grid layout component

Plan step 35: <x-grid :columns gap min-item>. The column count per breakpoint is written as five inline custom properties, each filled from the nearest smaller breakpoint, so a nested grid never inherits its parent's; min-item fills a row by the room the grid has, and with columns the counts become a ceiling. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
2026-09-14 14:50:47 +02:00
parent 8de053f15c
commit da7a05a619
6 changed files with 241 additions and 0 deletions
@@ -0,0 +1,49 @@
+{{-- Children in columns, inside a pane.
+
+         <x-grid :columns="['compact' => 1, 'medium' => 2, 'expanded' => 3]" gap="space300">…</x-grid>
+         <x-grid min-item="280px" gap="space200">…</x-grid>
+
+     `columns` is the column count per breakpoint — `compact`, `medium` (600px), `expanded` (840),
+     `large` (1200), `extra-large` (1600), M3's (docs/reference/m3/foundations.md § Layout →
+     Breakpoints) — as a map, or one whole number for all of them. A breakpoint left out takes the
+     nearest smaller one's count, and compact is 1 unless given. All five are written on the grid as
+     `--md-columns-compact` … `--md-columns-extra-large`, so a grid nested in another never inherits
+     its parent's.
+
+     `min-item` (`280px`, `18rem`, `20ch`, or a number of px) fills each row with as many columns as
+     fit at that width, which follows the room the grid has rather than the window — the right
+     choice inside a pane whose width is not the window's. With `columns` as well, the counts become
+     a ceiling. `gap` is a spacing token's name, `space25` … `space900`
+     (docs/reference/m3/styles-supplement.md § Spacing), none when left out or unknown. Children
+     keep their order, which is the reading order.
+
+     It takes `as`, `hide-below` and `hide-from` like every layout component, and the caller's
+     `class` and `style` land on it untouched (the caller's style after the column properties).
+     Drawn by resources/css/layout/grid.css. --}}
+
+@props([
+    'as' => null,
+    'columns' => null,
+    'gap' => null,
+    'minItem' => null,
+    'hideBelow' => null,
+    'hideFrom' => null,
+])
+
+@php
+    $layout = \NoNameWeb\LivewireMaterial\Support\Layout::class;
+    $element = $layout::element($as);
+    $minItem = $layout::length($minItem);
+
+    $style = $layout::columnStyle($layout::columns($columns)).($minItem !== null ? " --md-min-item: {$minItem};" : '');
+
+    $attributes = $attributes->merge(array_filter([
+        'data-md-grid' => true,
+        'data-md-gap' => $layout::spacing($gap),
+        'data-md-min-item' => $minItem !== null ? true : null,
+        'data-md-columns' => $minItem !== null && $columns !== null ? true : null,
+        'style' => $style,
+    ] + $layout::visibility($hideBelow, $hideFrom), fn ($value): bool => $value !== null));
+@endphp
+
+<{{ $element }} {{ $attributes }}>{{ $slot }}</{{ $element }}>