Grid-template-columns / grid-template-redovi - CSS-trikovi

grid-template-rowsI grid-template-columnssvojstva su primarni CSS svojstva za utvrđivanje rasporeda mrežu, nakon što je element je mreža kontekst ( display: grid;).

Postoje također -ms-grid-columnsi -ms-grid-rows, koji su stara IE verzija ovoga. Možda biste trebali razmotriti mogućnost automatskog dodavanja prefiksa da biste ih primili ili ne na svoj poziv. Bilo je i čudno razdoblje u kojem su bili grid-definition-columnsi grid-definition-rows, ali to više nije stvar.

Evo primjera izvedenog iz Microsoftove dokumentacije:

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

Ovo definira broj redaka / stupaca u mreži kao i njihovu dimenziju.

Ova dva svojstva podržavaju popis vrijednosti odvojenih razmacima. Svaka će vrijednost definirati novi stupac / redak postavljanjem dimenzije. Popis od 4 vrijednosti rezultirat će u 4 stupca / retka. Jedna vrijednost stvorit će jedan stupac / redak.

Prihvaćene vrijednosti uključuju duljine (kao što je pxi em), postotaka, frakcija ( fr, vidi dolje), auto(ili fit-content) min-content, max-contenti minmax(), ili repeat()funkcija.

U gornjem primjeru koda to znači:

Stupac 1 ( automatska ključna riječ): Stupac se prilagođava sadržaju u stupcu.
Stupac 2 ("100px"): Stupac je širok 100 piksela.
Stupac 3 ("1fr"): Stupac zauzima jednu frakcijsku jedinicu preostalog prostora.
Stupac 4 ("2fr"): Stupac zauzima dvije frakcijske jedinice preostalog prostora.

Red 1 ("50px"): redak je visok 50 piksela.
Red 2 ("5em"): Red je visok 5 ems.
Red 3 ( ključna riječ s minimalnim sadržajem ): Red je toliko mali koliko dopušta sadržaj.
Red 4 ( automatska ključna riječ): Red se prilagođava sadržaju u retku.

ponoviti()

repeat()Funkcija je posebno dizajniran za ovaj modul. Omogućuje vam definiranje uzorka ponovljenog X puta. Kao repeat(6, 1fr);. Recimo da želite napraviti 12 stupaca jednake širine razmaknutih jedan za drugim za maržu od 1%; mogli biste definirati 1fr repeat(11, 1% 1fr). To je isto kao 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Prva jedinica

frJedinica se može koristiti za grid-rowste grid-columnsvrijednosti. Oznaka je "djelić raspoloživog prostora". Shvatite to kao postotke za raspoloživi prostor kada ste skinuli stupce / retke fiksne veličine i na temelju sadržaja. Kao što specifikacija kaže:

Raspodjela razlomljenog prostora događa se nakon što su sve 'duljina' ili veličine redova i stupaca na temelju sadržaja dosegle svoj maksimum.

Povezano

Naš najbolji resurs za sve stvari CSS mreže je naš Cjelovit vodič za CSS mrežu.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.