Čo je Grid Property?

Vlastnosť mriežky je skratka pre riadky mriežka-šablóna, mriežka-šablóna-stĺpce, mriežka-šablóna-oblasti, mriežka-automatické-riadky, mriežka-automatické stĺpce, mriežka-automatický tok, mriežka-stĺpcová medzera a vlastnosti medzery medzi riadkami mriežky.

Štruktúra mriežky

Vlastnosti mriežky spôsobujú, že sa prvky zobrazujú ako matica ⊞

 
 
 
 
 
 
 
 

V css

#container {
 displej: mriežka;
 }

V príklade # sa #container zobrazí ako mriežka a jeho podradené prvky sa zobrazia ako bunky mriežky alebo položky

Kompatibilita prehliadača

Je to veľké vzrušenie, že IE, Edge, Firefox podporuje vlastnosť mriežky CSS . Prehliadač má väčšinou krásne používateľské rozhranie mriežky v nástrojoch pre vývojárov.

Mriežky

Mriežky sú vodorovné a zvislé čiary, ktoré sa používajú na určovanie polohy. Index polohy môže byť celé číslo (záporné aj kladné celé číslo).

Vlastnosti → začiatok stĺpca mriežky, koniec mriežky, koniec mriežky, koniec mriežky.

Vzorový kód:

#grid> div: nth-child (2) {
 začiatok stĺpca mriežky: 2;
 koniec mriežky: 3;
 začiatok riadku mriežky: 2;
 koniec mriežky: 3;
}

Prvok 2 začne v druhej zvislej čiare v 2 vodorovných čiarach a prvok končí v 3 zvislých čiarach a 3 zvislých čiarach.

Mriežka

Mriežka

Mriežka je medzera medzi dvoma susednými zvislými čiarami mriežky a dvoma susednými vodorovnými mriežkami.

Grid Cell

Mriežky

Mriežka je medzera medzi dvoma susednými čiarami mriežky. t.j. riadok, stĺpce.

Mriežka

Plocha mriežky a medzera mriežky

Mriežková oblasť je skupina jednej alebo viacerých buniek.

Grid Gap je medzera medzi riadkami a stĺpcami. Je to skrátená vlastnosť medzery medzi riadkami mriežky a medzery stĺpcov mriežky.

Stĺpec mriežky a mriežky

grid-row je skratka pre začiatok mriežky-riadok-koniec a koniec mriežky.

grid-column je skratka pre začiatok mriežky-stĺpec a koniec mriežky

Mriežka

grid-row-start → určuje počiatočnú pozíciu položky v rade

napr. mriežka-riadok-začiatok: 2 → Element sa začne na druhej zvislej čiare

koniec riadku mriežky → určuje koncovú pozíciu položky mriežky v riadku

napr. koniec riadku mriežky: 3 → Prvok sa končí v druhej zvislej čiare

Grid-auto-flow

Riadi, ako funguje algoritmus automatického umiestnenia. V predvolenom nastavení je hodnota riadok (položky sú umiestnené v riadku)

grid-auto-flow: riadok;
grid-auto-flow: kolónu;
Stĺpec automatického toku mriežky a riadok automatického toku mriežky

grid-auto-flow: riadok hustý → Používa algoritmus hustého balenia. Vyplňte voľný priestor v mriežke na základe riadkov.

grid-auto-flow: hustý stĺpec → Používa algoritmus hustého balenia. Vyplňte voľný priestor v mriežke na základe stĺpca

Explicitná mriežka a implicitná mriežka

Explicitná mriežka je mriežka vytvorená používateľom pomocou stĺpcov mriežka-šablóna-riadok, mriežka-šablóna-stĺpec

stĺpce mriežky-šablóny: opakujte (3, 100 px);
riadky šablóny mriežky: 100 x 100 pixlov;

Implicitnú mriežku vytvára prehliadač. Veľkosť implicitnej mriežky sa dá upraviť pomocou vlastnosti grid-auto-column a grid-auto-rows.

stĺpce mriežky-šablóny: opakujte (3, 100 px);
riadky mriežky: 100px;

Tabuľka mriežky:

Element môžeme usporiadať podľa vlastnosti oblasti šablóny.

v dotaze na médiá môžeme zmeniť oblasť šablón a zobraziť novú štruktúru mriežky.

skontrolujte viac kodepeny.

Pre mriežku väčšinou všetci používame bootstrap mriežkový systém. Bootstrap môže zmeniť názov triedy v každej verzii (Ale nie ako uhlové ), takže si musíme pamätať, ktorá verzia má názov triedy .

Použitím mriežky CSS vlastnosť, môžeme (aj v IE ) ľahko zobraziť prvky v zobrazení mriežky.

Ďakujem pekne za prečítanie! Ak sa vám to páčilo, prosím, podporte tlieskanie a zdieľanie príspevku. Nebojte sa zanechať komentár nižšie.