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:
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:
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.