Hvordan mediespørringer fungerer med Grid

For å lage oppsett som fungerer sømløst på alle enheter, må du kombinere CSS Grid med mediespørringer. Mediespørringer lar deg bruke ulike grid-egenskaper avhengig av skjermstørrelse, orientering eller enhetens egenskaper. Ved å endre grid-maler, avstander eller til og med plassering av elementer ved bestemte brytpunkter, kan du sikre at designet forblir funksjonelt og visuelt tiltalende på både stasjonære datamaskiner, nettbrett og smarttelefoner. Grid-egenskaper som grid-template-columns, grid-template-rows og grid-area kan alle defineres på nytt inne i mediespørringer, slik at du kan omorganisere innholdet uten å måtte skrive om HTML-en din.

Mobil-først vs. Desktop-først grid-strategier

Når du bygger responsive grid-oppsett, kan du bruke enten en mobil-først eller desktop-først tilnærming:

Mobil-først

• Definer gridet for de minste skjermene først;
• Legg til mer komplekse grid-regler for større enheter ved å bruke min-width mediespørringer;
• Denne metoden gir vanligvis bedre ytelse og enklere overstyringer.

Desktop-først

• Start med et oppsett tilpasset store skjermer;
• Bruk max-width-spørringer for å forenkle gridet for mindre enheter;
• Denne tilnærmingen kan være nyttig når hovedmålgruppen bruker stasjonære datamaskiner.

Uansett hvilken strategi du velger, bør brytpunktene dine baseres på innholdet og designbehovene dine, ikke bare enhetsstørrelser.