Sprievodca mriežkou CSS: Zvládnutie rozložení pomocou vlastností mriežky

Sprievodca mriežkou CSS: Zvládnutie rozložení pomocou vlastností mriežky
Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Umiestňovanie prvkov na webovej stránke môže byť veľmi komplikované pri práci so zložitými rozloženiami. Tu príde vhod mriežka CSS. Ide o dispozičný systém navrhnutý tak, aby zjednodušil proces vytvárania zložitých dispozícií.





Ako vám to pomáha? Na rozdiel od tradičných metód rozloženia, ktoré vám umožňujú umiestniť prvky iba do riadkov alebo stĺpcov, mriežka CSS vám ponúka to najlepšie z oboch svetov – 2D prístup využívajúci riadky a stĺpce.





Mriežkové kontajnery a položky

Vlastnosti mriežky CSS môžete použiť na dva hlavné typy prvkov: rodič a deti. Keď nastavíte vlastnosť display na 'grid' pre nadradený prvok, transformuje tento prvok na kontajner mriežky. Akýkoľvek podradený prvok v tomto kontajneri mriežky sa stane položkou mriežky, ktorá zdedí použité vlastnosti mriežky.





Tu je znázornené:

 Mriežkový kontajner so štyrmi mriežkovými položkami

Položka mriežky sa môže stať aj mriežkovým kontajnerom. Teraz môžete na rozloženie odkazovať ako na vnorenú mriežku – mriežku v mriežke. Kontajner hlavnej mriežky sa teraz označuje ako vonkajšia mriežka, zatiaľ čo kontajner s mriežkou sa stáva vnútornou mriežkou.



Každá z týchto mriežok funguje nezávisle od druhej, čo znamená, že vlastnosti nastavené pre vnútornú mriežku neovplyvňujú rozloženie vonkajšej mriežky a naopak.

Takto to vyzerá:





 Mriežkový kontajner so štyrmi položkami, vnorený mriežkový kontajner s tromi položkami.

Zvládnutie vzťahu medzi mriežkovými kontajnermi a položkami je nevyhnutné pre budovanie dvojrozmerných dispozícií efektívne.

ako používať mimoškolskú aplikáciu bez facebooku