Presúvanie položiek v rozložení rozvrhu CSS [Sprievodca]
Použitie Modul rozloženia siete CSS v webovom dizajne sa stáva čoraz reálnejší, ako začnú ďalšie prehliadače podporovať. Počas vytvárania rozloženia vyplňovania buniek mriežky môže prísť chvíľu, keď chcete dosiahnuť komplikovanejšie veci.
Môžete napríklad chcieť mierne sa pohybujú niektoré položky mriežky prilepené v oblastiach mriežky. Môžete tiež chcieť presuňte ich z kontajnera mriežky (pretečenie), alebo nad sebou (prekrytie), alebo len ... do prázdneho priestoru.
Takže v tomto príspevku vám ukážem, ako môžete presúvať, objednávať, pretekať, prekrývať a rozmerovo rozložiť položky keď používate modul CSS Grid Layout.
Vytvorte mriežku CSS
Po prvé, vytvoríme jednoduchú sieť CSS jeden riadok a tri stĺpce.
V HTML vytvoríme veľa divov, kde je kontajner mriežky obsahuje tri položky mriežky.
V CSS kontajner mriežky má zobrazenie: mriežka; vlastnosť a položky mriežky mať grid-area ktorý identifikuje názvy oblastí položiek mriežky.
Tiež pridajte grid-template-oblasti vlastnosť do kontajnera mriežky, v ktorom sa používajú názvy oblastí mriežky priraďte mriežkové oblasti bunkám mriežky, ktoré reprezentujú.
Všetky stĺpce veľkosť jednej frakcie (fr) šírky kontajnera, čím sa zabezpečí uzavretie mriežky.
.mriežka-kontajner zobrazenie: mriežka; grid-template-areas: "left center right"; mriežka-šablóna-stĺpce: opakovanie (3, 1fr); mriežka-šablóna-riadky: 80px; mriežka: 5px; šírka: 360px; farba pozadia: purpurová; .grid-left mriežka: ľavá; .grid-center mriežka: stred; . grid-right mriežka: pravá; .grid-kontajner div farba pozadia: svetlozelená;
Položky mriežky pretečenia
Môžete vytvoriť položku mriežky pretečie nádobu mriežky ak je to potrebné pre usporiadanie. Ak chcete dosiahnuť efekt pretečenia, stačí použite inú veľkosť stĺpca:
.mriežka-kontajner zobrazenie: mriežka; grid-template-areas: "left center right"; grid-template-columns: opakovanie (3, 150px); mriežka: 5px;
súčet stĺpcov a veľkosti medzery je väčší ako šírka kontajnera, čo spôsobí, že položky mriežky pretečú svoj kontajner.
Prekrytie položiek mriežky
položka mriežky sa môže prekrývať (úplne alebo čiastočne pokrývať) ďalšia položka mriežky v týchto prípadoch:
- Je nastavený na preklenutie (a nad) bunky inej položky mriežky.
- Jeho veľkosť bola zvýšená, čo spôsobilo, že sa prekrýva s blízkym bodom siete.
- Premiestňuje sa nad druhú položku mriežky.
Druhý a tretí prípad budeme diskutovať neskôr “dimenzovanie” a “pohyblivý” oddiely.
Po prvé, uvidíme prvý prípad, keď je položka mriežky sa rozprestiera naprieč iným.
Položka mriežky v strede má rozložené na ľavej strane, takže na obrazovke sú viditeľné iba dve položky.
.grid-center mriežka: stred; stĺpec mriežky: 1/3;
grid-stĺpik a grid-row vlastnosti priraďte riadky mriežky medzi ktorými sa musí nachádzať stĺpec alebo riadok.
Na nižšie uvedenom diagrame môžete vidieť, ako grid-stĺpec: 1/3 Pravidlo CSS funguje: stredový stĺpec rozpätie medzi čiarami 1 a 3 mriežky. V dôsledku toho sa stredový stĺpec prekrýva ľavý.
Presunúť položky siete
Tým, že sa sťahujem, myslím presunúť položky mierne okolo. Ak chcete úplne premiestniť položku do inej bunky alebo oblasti mriežky, odporúčam vám aktualizovať kód na vytvorenie siete.
Premiestňovanie položiek mriežky je jednoduché. proste Použi okraj, premeniť, alebo Pozícia: relatívna; vlastnosti. Pozrite nižšie, ako sa položky presúvajú pomocou týchto vlastností.
Stredové a pravé položky mriežky je možné presunúť (ako je uvedené vyššie) nasledujúcimi spôsobmi:
1. Použitie okraj
Záporné okraje zvyšujú rozmery položiek mriežky, zatiaľ čo pozitívne okraje ich zväčšujú. Použitím kombinácie obidvoch položiek mriežky môžete pohybovať potiahnutím.
.grid-center mriežka: stred; margin-left: -10px; margin-right: 10px; margin-top: -10px; margin-bottom: 10px; . grid-right mriežka: pravá; margin-left: 10px; margin-right: -10px; margin-top: -10px; margin-bottom: 10px;
2. Použitie premeniť
translate () Funkcia CSS pohybuje prvkom pozdĺž osi x a y. Použitie spolu s premeniť Vlastnosť umožňuje zmeniť pozíciu položky mriežky.
.grid-center mriežka: stred; transformovať: prekladať (-10px, -10px); . grid-right mriežka: pravá; transformovať: prekladať (10px, -10px);
3. Použitie pozície
Použitie pozícia: relatívna; pravidlo so zadaným top, dno, ľavý, a správny Vlastnosti môžu byť použité aj na pohyb okolo položiek siete.
.grid-center mriežka: stred; pozícia: relatívna; spodné: 10px; pravá: 10px; . grid-right mriežka: pravá; pozícia: relatívna; spodné: 10px; vľavo: 10px;
Položky mriežky
Položky mriežky sa vykresľujú na obrazovke v poradí, v akom sa nachádzajú v zdrojovom kóde HTML.
V predchádzajúcej časti, keď bola stredová položka presunutá doľava, bola prehliadačom umiestnená v hornej časti ľavej položky. Stalo sa to preto, lebo v HTML, Môžeme to však zmeniť položky poradia pomocou Použitie Rovnako ako v module CSS Grid Layout, zmena poradia prvkov v HTML nemá vplyv na rozloženie siete, môžete tiež dať Ak pre položku mriežky používate riadky alebo stĺpce s automatickou veľkosťou (pomocou Pamätajte, že v našej vzorkovacej mriežke trvajú všetky tri stĺpce jednu zlomok ( Tu zmeníme veľkosť ľavej položky pomocou Tu zmeníme veľkosť ľavej položky pomocou z-index alebo objednať Vlastnosti CSS.
z-index: 1; pravidlo, ľavá položka mriežky získal vyšší kontext stohovania.. mriežka vľavo mriežka: ľavá; z-index: 1;
Položky rozmerovej tabuľky
auto, fr, gr jednotky) sa zmenší, aby sa vytvoril priestor pre susednú položku, ktorá sa rozrástla iba ak uvedenej položky nebol veľkosťou premeniť alebo záporné rozpätie.fr) kontajnera mriežky. Pozrite sa, ako vyzerajú všetky tri položky po tom, ako je ľavá veľkosť zmenená dvoma rôznymi spôsobmi.1. Veľkosť s
šírka a výškašírka a výška vlastnosti. V dôsledku toho zostáva vo vnútri kontajnera mriežky.
.mriežka vľavo mriežka: ľavá; šírka: 200px; výška: 90px;
2. S veľkosťou
premeniťpremeniť vlastnosť. V dôsledku toho pretečie nádobu a mriežka tiež zmizne.
.mriežka vľavo mriežka: ľavá; transformácia: scalex (1,8);
