Grid-predloga-stolpci / mreža-predloga-vrstice - CSS-triki

Lastnosti grid-template-rowsin grid-template-columnsso primarne lastnosti CSS za vzpostavitev postavitve mreže, ko je element kontekst mreže ( display: grid;).

Obstajajo tudi -ms-grid-columnsin -ms-grid-rows, ki so stara različica IE tega. Morda boste želeli razmisliti o samodejnem vstavljanju, da boste prejeli klic ali ne. Bilo je tudi čudno obdobje, ko so bili grid-definition-columnsin grid-definition-rows, vendar to ni več stvar.

Tu je primer, ki izhaja iz Microsoftove dokumentacije:

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

To določa število vrstic / stolpcev v mreži in njihovo dimenzijo.

Ti dve lastnosti podpirata seznam vrednosti, ločenih s presledki. Vsaka vrednost bo z nastavitvijo dimenzije opredelila nov stolpec / vrstico. Seznam 4 vrednosti bo povzročil 4 stolpce / vrstice. Ena vrednost bo ustvarila en stolpec / vrstico.

Sprejemljivi vrednosti vključujejo dolžino (na primer pxali em), odstotke, frakcije ( frglej spodaj), auto(ali fit-content) min-content, max-contentin minmax()ali repeat()funkcija.

V zgornjem primeru kode to pomeni:

Stolpec 1 ( samodejna ključna beseda): Stolpec se prilega vsebini stolpca.
Stolpec 2 (»100 slikovnih pik«): Stolpec je širok 100 slikovnih pik.
Stolpec 3 (»1fr«): Stolpec zavzame eno frakcijo preostalega prostora.
Stolpec 4 (»2fr«): Stolpec zavzame dve frakcijski enoti preostalega prostora.

Vrstica 1 (»50 slikovnih pik«): vrstica je visoka 50 slikovnih pik.
Vrstica 2 ("5em"): vrstica je visoka 5 ems.
Vrstica 3 ( ključna beseda z minimalno vsebino ): vrstica je tako majhna, kot dovoljuje vsebina.
Vrstica 4 ( samodejna ključna beseda): vrstica se prilega vsebini v vrstici.

ponovite ()

repeat()Funkcija je posebej za ta modul. Omogoča vam definiranje vzorca, ponovljenega X-krat. Všeč mi je repeat(6, 1fr);. Recimo, da želite narediti 12 stolpcev enake širine, ki so med seboj oddaljeni za 1% roba; lahko definirate 1fr repeat(11, 1% 1fr). Je enako kot 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Prva enota

frEnoto se lahko uporablja za grid-rowsin grid-columnsvrednosti. To pomeni "delček razpoložljivega prostora". Pomislite na to kot odstotke za razpoložljivi prostor, ko ste slekli stolpce / vrstice s fiksno velikostjo in vsebino. Kot piše v specifikaciji:

Razdelitev delnega prostora se zgodi, ko so vse velikosti vrstic in stolpcev na podlagi vsebine dosegle svoj maksimum.

Sorodno

Naš najboljši vir za vse stvari v mreži CSS je naš popoln vodnik po mreži CSS.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.