Stĺpce mriežky-šablóny / riadky mriežky-šablóny - Triky CSS

Vlastnosti grid-template-rowsa grid-template-columnssú primárnymi vlastnosťami CSS na vytvorenie rozloženia mriežky, akonáhle je elementom kontext mriežky ( display: grid;).

Existujú aj -ms-grid-columnsa -ms-grid-rows, ktoré sú starou IE verziou tohto. Možno budete chcieť zvážiť automatické prepnutie, aby ste ich dostali alebo nie. Nastalo aj čudné obdobie, keď boli grid-definition-columnsa grid-definition-rows, ale to už nie je nič.

Tu je príklad odvodený z dokumentácie spoločnosti Microsoft:

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

Týmto sa definuje počet riadkov / stĺpcov v mriežke a tiež ich dimenzia.

Tieto dve vlastnosti podporujú zoznam hodnôt oddelených medzerami. Každá hodnota definuje nový stĺpec / riadok nastavením dimenzie. Zoznam 4 hodnôt bude mať za následok 4 stĺpce / riadky. Jedna hodnota vytvorí jeden stĺpec / riadok.

Prijaté hodnoty: dĺžka (ako pxalebo em), percenta, frakcie ( frpozri nižšie), auto(alebo fit-content), min-content, max-contenta minmax(), alebo repeat()funkcie.

V príklade kódu vyššie to znamená:

Stĺpec 1 ( kľúčové slovo auto ): Stĺpec je prispôsobený obsahu v stĺpci.
Stĺpec 2 („100 pixelov“): Stĺpec je široký 100 pixelov.
Stĺpec 3 („1fr“): Stĺpec zaberá jednu zlomkovú jednotku zostávajúceho priestoru.
Stĺpec 4 („2fr“): Stĺpec zaberá dve zlomkové jednotky zostávajúceho priestoru.

Riadok 1 („50px“): Riadok je vysoký 50 pixelov.
Riadok 2 („5em“): Riadok je vysoký 5 em.
Riadok 3 ( kľúčové slovo s minimálnym obsahom ): Riadok je taký malý, ako to obsah dovolí.
Riadok 4 ( automatické kľúčové slovo): riadok je prispôsobený obsahu v riadku.

opakovať ()

repeat()Funkcia bol špeciálne navrhnutý pre tento modul. Umožňuje vám definovať vzor opakovaný X-krát. Ako repeat(6, 1fr);. Povedzme, že chcete urobiť 12 stĺpcov rovnakej šírky, ktoré sú od seba vzdialené 1% okrajom; mohli by ste definovať 1fr repeat(11, 1% 1fr). Je to rovnaké ako 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Jednotka fr

frJednotka môže byť použitá pre grid-rowsa grid-columnshodnoty. Znamená to „zlomok dostupného priestoru“. Berte to ako percentá dostupného priestoru, keď ste odstránili stĺpce / riadky s pevnou veľkosťou a založené na obsahu. Ako hovorí špecifikácia:

K rozdeleniu zlomkového priestoru dôjde potom, čo všetky veľkosti riadkov a stĺpcov založené na dĺžke alebo obsahu založené na obsahu dosiahnu maximum.

Súvisiace

Náš najlepší zdroj pre všetky veci CSS grid je náš Kompletný sprievodca po CSS Grid.

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.