Siatka

Bez columns siatka automatycznie mieści tyle ścieżek o szerokości co najmniej min, ile pozwoli miejsce, a każda dzieli po równo to, co zostanie. Tego właśnie chce lista kart i nie potrzeba do tego breakpointów: zmień rozmiar tej strony, a dema poniżej same się przeorganizują.

Automatyczne dopasowanie

Domyślne. Ścieżki mają co najmniej 16rem szerokości.

Routing

Wczytywanie danych

Zasoby

Obrazy

Wyspy

Wyszukiwanie

grid(
  ...['Routing', 'Wczytywanie danych', 'Zasoby', 'Obrazy', 'Wyspy', 'Wyszukiwanie'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, name))),
  ),
)

Szerokość ścieżki

min ustala, jak wąska może zrobić się ścieżka, zanim siatka zejdzie do mniejszej liczby kolumn. Mniej znaczy więcej kolumn.

2xl

3xl

4xl

5xl

grid({ min: '9rem' },
  ...['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small', align: 'center' }, name))),
  ),
)

Stała liczba kolumn

Podaj liczbę, gdy liczba kolumn nie ma zmieniać się z szerokością okna. Każda ścieżka dostaje równy udział.

Jeden

Dwa

Trzy

grid({ columns: 3 },
  ...['Jeden', 'Dwa', 'Trzy'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small', align: 'center' }, name))),
  ),
)

Własny szablon

Ciąg znaków jest przekazywany wprost jako grid-template-columns, na podział „panel boczny i treść” albo cokolwiek innego, co potrafi wyrazić siatka CSS.

Panel boczny

Treść, zabierająca resztę wiersza.

grid({ columns: '12rem 1fr', gap: 'lg' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Panel boczny'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Treść, zabierająca resztę wiersza.'))),
)

Odstęp i wyrównanie

Krótka

Wyższa karta, z dwoma wierszami tekstu, żeby pokazać, co align robi jej niższym sąsiadkom.

Krótka

grid({ min: '10rem', gap: 'xl', align: 'center' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Krótka'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Wyższa karta, z dwoma wierszami tekstu, żeby pokazać, co align robi jej niższym sąsiadkom.'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Krótka'))),
)

Propsy

Prop	Typ	Domyślnie	Opis
`columns`	`number \| string`	—	Stała liczba ścieżek albo surowa wartość grid-template-columns. Pomiń dla automatycznego dopasowania.
`min`	`string`	`'16rem'`	Minimalna szerokość ścieżki przy automatycznym dopasowaniu.
`gap`	`Space`	`'md'`	Odstęp między ścieżkami i wierszami.
`align`	`string`	`'stretch'`	Dowolna wartość align-items.
`as`	`string`	`'div'`	Element do wyrenderowania.

Ścieżka nigdy nie staje się szersza niż sama siatka, nawet gdy min przekracza dostępne miejsce — więc minimum 16rem nie wywoła poziomego paska przewijania na telefonie o szerokości 320px.