Om komponenten
Formål
Generisk layout-primitiv for rutenett med CSS Grid. Komponenten vet ingenting om innholdet; den styrer bare hvordan direkte barn fordeles i kolonner.
Egner seg for
- Enkle rutenett av likeverdige barn, f.eks. skjemafelt-par eller et responsivt sett med forhåndsvisninger.
- Layout der antall kolonner enten er fast (
cols) eller styres av en minste elementbredde (min-item-width).
Egner seg ikke for
- Komplekse sideoppsett med named areas, ulik spanning eller innhold som må vite om naboelementer.
- Tilfeller der hvert barn trenger individuell rad- eller kolonneplassering via komponent-API-et.
Bruk
<script type="module" src="/designsystem/komponenter/layout/grid/grid.js"></script>
<!-- Fast antall kolonner (f.eks. par av skjemafelt) -->
<lm-grid cols="2">
<label><span>Fra dato</span><input type="date" name="start"></label>
<label><span>Til dato</span><input type="date" name="slutt"></label>
</lm-grid>
<!-- Responsivt antall kolonner basert på minste ønskede elementbredde
(f.eks. et rutenett av bildekort) -->
<lm-grid min-item-width="6em">
<lm-preview-image src="..."></lm-preview-image>
<lm-preview-image src="..."></lm-preview-image>
</lm-grid>Prøv selv
Rediger koden under - resultatet oppdateres live.
Attributter
| Attributt | Type | Standard | Beskrivelse |
|---|---|---|---|
cols | number | null | null | Attributt/property. Fast antall kolonner. Når satt, brukes repeat(cols, 1fr), og rutenettet kollapser til én kolonne når komponentens egen bredde blir for trang (container query). |
min-item-width | string (CSS-lengde) | "10em" | Attributt/property. Kun brukt når cols ikke er satt. Rutenettet bruker repeat(auto-fit, minmax(min-item-width, 1fr)) - antall kolonner tilpasser seg automatisk komponentens bredde. |
gap | string (CSS-lengde) | "0.6ch 1ch" | Attributt. Overstyrer mellomrom mellom rutenett-elementer. |
Slots
| Slot | Beskrivelse |
|---|---|
| (standard) | Vilkårlig markup - hvert direkte barn blir ett rutenett-element. |
Parts
| Part | Beskrivelse |
|---|---|
container | Indre grid-beholder. |
Styling med ::part()
Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:
lm-grid::part(container) {
/* egne stiler for "Indre grid-beholder." */
}Tilgjengelighet
Komponenten setter ingen ARIA-roller eller aria-*-attributter; den er bare layout rundt slottede barn. Tastaturlogikk finnes ikke. display: contents på slot lar barna bli de faktiske grid-elementene. Komponenten animerer ikke.
- Komponenten setter ingen ARIA-roller eller
aria-*-attributter; den er bare layout rundt slottede barn. - Den har ingen egen tastaturlogikk.
display: contentspåslotlar barna bli de faktiske grid-elementene.- Komponenten har ingen egen animasjon eller høy-kontrastlogikk.
Detaljer
cols-modus bruker container queries i stedet for viewport-media queries, siden komponenten kan stå i et smalt område på en bred skjerm.min-item-width-modus er allerede responsiv viaauto-fitogminmax, og trenger ingen egen kollapslogikk.<slot>brukerdisplay: contents, så lys-DOM-barna blir de faktiske grid-elementene.
Referanser
Se også:
../../innhold/card/index.html - kort er et typisk innholdselement i et grid når flere oppsummeringer skal vises samlet.../../medieinnhold/preview-image/index.html - er et typisk barn når grid brukes til et responsivt galleri eller kvitteringsrutenett.../../medieinnhold/preview-document/index.html - er et typisk barn når grid brukes til et responsivt galleri eller kvitteringsrutenett.
Brukes av:
turer/index.html - "Ny tur"-dialogens periode-steg (cols="2").turer/trip.html - skjemafelt-par i "Legg til stopp", "Legg til fly", "Legg til hotell" og "Rediger tur" (cols="2"), samt kvitteringsrutenettet (min-item-width).slides/komponenter/slide-info/slide-info.js - rutenettet med slide-forhåndsvisninger på infosiden (cols="4").slides/index.html - rutenett av presentasjonskort på forsiden.index.html (rot) - prosjektkortene på forsiden.
Avhengigheter: Ingen