Mote fleksible layouter med CSS-grid

Sep 13, 2025

hvordan

A woman sits at a laptop tweaking a CSS Grid layout

[1. 3]

CSS-grid er perfekt for å lage to-akse-layouter av rader og kolonner. Syntaxen er enkel og gjør sidelayout en bris. Layouts som ville ha krevd flere nestede beholdere, kan nå enkelt beskrives i CSS.

Nettverk fungerer annerledes på andre layoutegenskaper, siden det gjelder "grid" -verdien til "displayet", vil det påvirke eventuelle direkte barn. Disse elementene er nå nettprodukter og vil bli plassert i henhold til reglene du angir på foreldrene (med mindre det er spesielt plassert).

Komme til grep med rutenettet

GRID bringer en rekke nye funksjoner:

GRID GAP.

I stedet for å bruke marginer, har rutenettet sin egen eiendom for å definere hull mellom rutenettartikler, slik at rutenettet er definert og upåvirket av eventuelle hull. Rutenettsystemer (som de som finnes i Inuit og Twitter Bootstrap), er vanligvis avhengige av å sette negative marginer for å justere alt riktig.

FR-enheten

Kort for brøkdel, er denne nye måleenheten brukt til å dele oppsettet i fraksjoner, med eller uten et gap.

GRID plassering

CSS-nettet tillater et hvilket som helst element som skal prioriteres og plasseres hvor som helst på rutenettet før alle andre elementer, som deretter plasseres automatisk.

Gridområder og maler

Navngitte områder på rutenettet er definert, som deretter kan refereres til å definere layoutet på en nesten ASCII-mote.

MINMAX ()

Eiendomsverdien 'MINMAX ()' lar deg bruke minimums- og maksimal størrelse for rutenettelementer, kolonner og rader. Denne funksjonen mangler dessverre fra FlexBox og hver annen layoutmodul i CSS.

Bygge gridene dine

CSS GRIDs kraftige områder og maler gjør det mulig for kompliserte layouter som enkelt kan oppnås. Du starter med å bruke et navn på elementene i rutenettet ditt ved hjelp av 'Grid-området' eiendom - for eksempel 'header {grid-området: header; } '. Når du har kalt alle områdene i rutenettet ditt, kan du bruke eiendommen "Grid-template-områdene for å beskrive utformingen.

 Grid-template-områder:
  "Header Header Header"
  "Venstre-sidebar artikkel høyre sidebar"
  "Footer footer footer"
;

Kodeeksemplet ovenfor beskriver et tre-til-tre-rutenett, du gjentar bare navnet på rutenettet hvis du vil at det skal spore flere kolonner eller rader. Du kan også bruke media-spørringer for å endre rutenettet for forskjellige størrelser.

Du kan da bruke den nye 'FR-enheten til å definere hvordan bredden er delt mellom de forskjellige kolonnene:

 Grid-template-kolonner: 1fr 3fr 1fr;

Eksemplet som er vist ovenfor, deles den tilgjengelige bredden i fem like breddeverdier; Med andre ord vil det påta seg en femtedel til den første kolonnen, tre femtedeler til den andre kolonnen og den endelige femtedelen til den endelige kolonnen.

For å størrelse på radene kan du bruke den nye "MINMAX" eiendomsverdien til å størrelse øverste og nedre kolonner til innholdet og deretter la den midterste raden spanne gjenværende plass i rutenettet.

 Grid-template-rader:
  Minmax (mininnhold, maks innhold)
  Auto
MINMAX (mininnhold, maks innhold);

Denne artikkelen ble opprinnelig publisert i utgave 271 av Creative Web Design Magazine webdesigner. Kjøpe utgave 271. eller Abonner på webdesigner .

Vil du styrke CSS-nettverket dine?

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018 — Brenda -retoren gir henne snakk med CSS-nettet i den virkelige verden på genererer New York fra 25 til 27. april 2018

Som designer og front-end-utvikler på et programvareutviklingsbyrå har Brenda Storer brukt CSS-nett i produksjonen for nettsteder siden den første utgivelsen til nettlesere i mars 2017 og er en stor fan.

I hennes snakk på Generer New York fra 25-27 april 2018 Brenda vil vise trinnvis hvordan du gradvis kan forbedre nettstedet ditt med CSS-rutenett og skrive en kuletproof tilbakemelding for eldre nettlesere (eller til og med fortsette å bruke ditt nåværende gridramme som en fallback), alle med rene CSS: Nei JavaScript kreves .

Generer New York finner sted fra 25-27 april 2018. Få din billett nå .

Relaterte artikler:

CSS GRID Layout Secrets Revealed
Opprett et responsivt layout med CSS-rutenett
Få opp til fart med CSS-rutenett

Mote fleksible layouter med CSS-grid

Komme til grep med rutenettet

Bygge gridene dine

Vil du styrke CSS-nettverket dine?

hvordan - Mest populære artikler

Kom i gang med WebVr

Kom i gang med Babel 7

Hvordan lage et videospillkarakter i Zbrush

Master vitenskapen om konverteringsfrekvensoptimalisering

5 tips for å forbedre VR-kreasjonene

maling våt-på-våt i oljer

Modell Darth Vader i Zbrush

Hvordan fange bevegelse i dine 3D-render

Kategorier