Útmutató a CSS-rácshoz: Elrendezések elsajátítása rács tulajdonságaival

Útmutató a CSS-rácshoz: Elrendezések elsajátítása rács tulajdonságaival
Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

Az elemek elhelyezése a weboldalon nagyon bonyolult lehet, ha összetett elrendezésekkel dolgozik. Itt jön jól a CSS rács. Ez egy olyan elrendezési rendszer, amely az összetett elrendezések létrehozásának folyamatát egyszerűsíti.





Hogyan segít? A hagyományos elrendezési módszerekkel ellentétben, amelyek csak sorokban vagy oszlopokban teszik lehetővé az elemek elhelyezését, a CSS-rács mindkét világból a legjobbat kínálja – a sorokat és oszlopokat használó 2D-s megközelítést.





Rács konténerek és tételek

A CSS-rács tulajdonságait két fő elemtípusra alkalmazhatja: szülőre és gyermekre. Ha a megjelenítési tulajdonságot 'rács' értékre állítja egy szülőelemhez, akkor az elemet rácstárolóvá alakítja. A rácstárolón belül minden gyermekelem rácselemmé válik, örökli az alkalmazott rács tulajdonságait.





Íme, hogyan ábrázolják:

 Rács tároló négy rács elemmel

A rácselemből rácstároló is lehet. Az elrendezést most beágyazott rácsként – egy rácson belüli rácsként – használhatja. A fő rácstartályt most külső rácsnak nevezik, míg az elemből kifordított rácsos tartály belső rácsmá válik.



Mindegyik rács a másiktól függetlenül működik, ami azt jelenti, hogy a belső rácsokhoz beállított tulajdonságok nem befolyásolják a külső rács elrendezését, és fordítva.

Így néz ki:





 Rácstároló négy elemmel, beágyazott rácstároló három elemmel.

A rácskonténerek és az elemek közötti kapcsolat elsajátítása elengedhetetlen kétdimenziós elrendezések építése hatékonyan.