Rutenettmal-kolonner / rutenettmal-rader - CSS-triks

Anonim

Egenskapene grid-template-rowsog grid-template-columnser de primære CSS-egenskapene for å etablere et rutenettoppsett når elementet er en rutenettkontekst ( display: grid;).

Det er også -ms-grid-columnsog -ms-grid-rows, som er den gamle IE-versjonen av dette. Det kan være lurt å vurdere Autofrefixing for å få dem, eller ikke, samtalen din. Det var også en merkelig periode hvor de var grid-definition-columnsog grid-definition-rows, men det er ikke noe lenger.

Her er et eksempel hentet fra Microsofts dokumentasjon:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

Dette definerer antall rader / kolonner i rutenettet samt dimensjonen.

Disse to egenskapene støtter en liste over verdier atskilt med mellomrom. Hver verdi vil definere en ny kolonne / rad ved å angi en dimensjon. En liste med 4 verdier vil resultere i 4 kolonner / rader. En enkelt verdi vil produsere en enkelt kolonne / rad.

Aksepterte verdier omfatter lengde (som pxeller em), prosenter, fraksjoner ( fr; se nedenfor), auto(eller fit-content), min-content, max-content, og minmax(), eller repeat()funksjon.

I kodeeksemplet ovenfor betyr det:

  • Kolonne 1 ( automatisk nøkkelord): Kolonne er tilpasset innholdet i kolonnen.
  • Kolonne 2 (“100 piksler”): Kolonnen er 100 piksler bred.
  • Kolonne 3 (“1fr”): Kolonne tar opp en brøkdel av gjenværende plass.
  • Kolonne 4 (“2fr”): Kolonne tar opp to brøkdeler av gjenværende plass.
  • Rad 1 (“50px”): Rad er 50 piksler høy.
  • Rad 2 (“5em”): Rad er 5 em høy.
  • Rad 3 ( nøkkelord med lite innhold ): Rad er så liten som innholdet lar det være.
  • Rad 4 ( automatisk nøkkelord): Rad er tilpasset innholdet i raden.

gjenta()

Den repeat()funksjonen er spesielt utformet for denne modulen. Den lar deg definere et mønster gjentatt X ganger. Som repeat(6, 1fr);. La oss si at du vil gjøre 12 kolonner med like bredde som er adskilt fra hverandre med 1% margin; du kunne definere 1fr repeat(11, 1% 1fr). Det er det samme som 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Fr Enheten

Den frEnheten kan brukes for grid-rowsog grid-columnsverdier. Det står for "brøkdel av tilgjengelig plass". Tenk på det som prosentandeler for ledig plass når du har tatt av faste størrelser og innholdsbaserte kolonner / rader. Som spesifikasjonen sier:

Fordelingen av fraksjonell plass skjer etter at alle 'lengde' eller innholdsbaserte rad- og kolonnestørrelser har nådd sitt maksimale.

I slekt

Vår beste ressurs for alle ting CSS grid er vår komplette guide til CSS Grid.

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
57 52 11 * 16 10.1

Mobil / nettbrett

Android Chrome Android Firefox Android iOS Safari
88 85 81 10.3