Elemek mozgatása a CSS Grid elrendezésben [Útmutató]
Használni a CSS Grid Layout Module A webes tervezés egyre inkább megvalósítható, mivel egyre több böngésző kezdődik támogassa. A rácscellákat kitöltő elrendezések létrehozásakor azonban egy pillanatra is előfordulhat, ha bonyolultabb dolgokat szeretne elérni.
Például, érdemes lehet kissé mozogni a rácsok egyes részei elakadtak a rácsterületükön. Azt is szeretné mozgassa őket a rácstartályból (túlcsordulás), vagy egymás felett (átfedés), vagy csak… néhány üres helyre.
Tehát ebben a hozzászólásban megmutatom, hogyan lehet mozgatás, rendelés, túlcsordulás, átfedés és méretrács elemek a CSS Grid Layout Module használatakor.
Hozzon létre egy CSS rácsot
Először hozzunk létre egy egyszerű CSS rácsot egy sor és három oszlop.
A HTML-ben létrehozunk egy csomó osztót, ahol a rácstartály tartalmazza a három rácselemet.
A CSS-ben a rácstartály rendelkezik a kijelző: rács; ingatlan és a hálózati elemek van grid-terület amely azonosítja a rácselemek nevét.
Mi is adja hozzá a grid-template-nak ingatlan a rácstartályba, ahol a rácsterületek elnevezéseit szokták használni hozzárendelje a rácsterületeket az általuk képviselt rácscellákhoz.
Minden oszlop egy frakció méretefr) a tartály szélessége, biztosítva a rácselemek elszigetelését.
.rács-tartály kijelző: rács; grid-template-területek: 'bal középső jobb'; grid-template-oszlopok: ismétlés (3, 1fr); rács-sablon sorok: 80px; rács-rés: 5px; szélesség: 360px; háttérszín: bíbor; .grid-left grid-area: left; .grid-center grid-area: center; .grid-right grid-area: right; .grid-container div háttérszín: lightgreen;
Túlfolyó rács elemek
Készíthet rácselemet túlcsordul a rácstartálya ha szükséges az elrendezéshez. A túlcsordulás hatásának eléréséhez csak szükséged van használjon egy másik oszlopméretet:
.rács-tartály kijelző: rács; grid-template-területek: 'bal középső jobb'; grid-template-columns: ismétlés (3, 150px); rács-rés: 5px;
A az oszlop- és résméret összege nagyobb, mint a a tartály szélessége, ami a rácselemeket túlcsordítja a tartályból.
Átfedési rácselemek
A a rácselem átfedhet (teljesen vagy részben fedő) másik rácselem a következő esetekben:
- Úgy van beállítva, hogy áthaladjon egy másik rácselem cellájában (vagy azon túl).
- A mérete megnövekedett, ami átfedést okoz a közeli rácselemhez.
- Ez egy másik rácselem tetején halad át.
A második és harmadik esetet később, a “méretezése” és “Mozgó” szakaszok.
Először nézzük meg az első esetet, amikor egy rácselemet egy másikra terjed ki.
A központban található rácselem a bal oldalon, így csak két elem látható a képernyőn.
.grid-center grid-area: center; rácsoszlop: 1/3;
A rács-oszlopon és rács-sorban tulajdonságok hozzárendelje a rácsvonalakat amelyek között egy oszlop vagy sornak meg kell felelnie.
Az alábbi ábrán látható, hogy a rácsoszlop: 1/3 CSS szabály működik: a középső oszlop az 1-es és 3-as rácsvonalak között. Ennek eredményeként a középső oszlop átfedi a bal oldalt.
Mozgassa a rácselemeket
Úgy értem, hogy mozogsz az elemek kissé mozgatása. Ha teljesen el szeretné helyezni egy elemet egy másik rács cellába / területre, azt javaslom, hogy frissítse a rács létrehozási kódját.
A hálózati elemek mozgatása egyszerű. Éppen használja a margó, a átalakít, vagy a helyzet: a relatív; tulajdonságok. Lásd az alábbiakat, hogy az elemeket hogyan mozgatják a tulajdonságokkal.
A középső és a jobb oldali rácselemeket a következő módon lehet mozgatni:
1. Használat margó
A negatív margók növelik a rácselemek méreteit, míg a pozitív margók vágják őket. Mindkettő kombinációjának használatával a rácselemek mozgathatók.
.grid-center grid-area: center; margin-left: -10px; margin-right: 10px; margin-top: -10px; margin-bottom: 10px; .grid-right grid-area: right; margin-left: 10px; margin-right: -10px; margin-top: -10px; margin-bottom: 10px;
2. Használat átalakít
A fordít() CSS funkció az elemet az x- és y-tengely mentén mozgatja. Használatával együtt átalakít A tulajdonság lehetővé teszi a rácselem helyzetének megváltoztatását.
.grid-center grid-area: center; transzformálás: lefordítani (-10px, -10px); .grid-right grid-area: right; transzformálás: lefordítani (10px, -10px);
3. Használat pozíció
Használni a pozíció: relatív; szabály a megadott felső, alsó, balra, és jobb a tulajdonságok a rácselemek mozgatására is használhatók.
.grid-center grid-area: center; pozíció: relatív; alsó: 10px; jobb: 10px; .grid-right grid-area: right; pozíció: relatív; alsó: 10px; balra: 10px;
Rendeljen rácselemeket
A rácselemek a képernyőn jelennek meg a HTML forráskódban megjelenő sorrendben.
Az előző részben, amikor a középső elemet balra mozgatták, a böngésző a bal oldali elem tetejére helyezte. Ez azért történt, mert a HTML-ben, Azonban tudunk módosítsa a megrendelési rács elemeket használni a Használni a Mint a CSS Grid Layout modulban, az elemrendszert a HTML-ben módosítjuk nem befolyásolja a rács elrendezését, te is elhelyezhetsz Ha automatikus méretű sorokat vagy oszlopokat használ a rácselemhez (a Ne feledje, hogy a mintarácsunkban mindhárom oszlop egy töredéket vesz fel ( Itt megváltoztatjuk a bal elem méretét használni a Itt megváltoztatjuk a bal elem méretét használni a z-index vagy a sorrend CSS tulajdonságok.
z-index: 1; szabály, a bal rács elem van egy magasabb halmozási környezet.. rács-bal rács-terület: balra; z-index: 1;
Méret rács elemek
kocsi, fr, gr egységeket), ez csökkenni fog annak érdekében, hogy helyet biztosítson a szomszédos \ t csak ha említett elemet nem méretezett átalakít vagy negatív margó.fr) a rácstartályból. Vessen egy pillantást arra, hogyan néz ki mind a három elem, miután a bal oldali méretet két különböző módon átméretezték.1. Méret
szélesség és magasságszélesség és magasság tulajdonságok. Ennek eredményeként a rácstartály belsejében marad.
.rács-bal rács-terület: balra; szélesség: 200px; magasság: 90px;
2. Méret
átalakítátalakít ingatlan. Ennek eredményeként túlcsordul a tartály, és a rácsrés is eltűnik.
.rács-bal rács-terület: balra; transzformáció: scalex (1.8);
