CSS-ruudukon asettelujen siirtäminen [Guide]
Käyttämällä CSS Grid Layout Module web-suunnittelussa tulee yhä useammin toteutettavaksi, kun enemmän selaimia alkaa tukea sitä. Luodessasi ruudukkoelementtejä täyttäviä asetteluja saattaa kuitenkin tulla hetki, kun haluat saavuttaa monimutkaisempia asioita.
Voit esimerkiksi haluta hieman liikkua jotkut verkko-osat ovat tarttuneet niiden verkkoalueisiin. Haluat ehkä myös siirrä ne ruudukon säiliöstä (ylivuoto), tai toisistaan (päällekkäisyys) tai vain… tyhjään tilaan.
Joten tässä viestissä näytän sinulle, miten voit siirtää, tilata, ylivuotoa, päällekkäisyyksiä ja koko ruudukkoa kun käytät CSS Grid Layout Module -ohjelmaa.
Luo CSS-verkko
Ensinnäkin luodaan yksinkertainen CSS-verkko yksi rivi ja kolme saraketta.
HTML: ssä luomme joukon diveja, joissa ruudukko on sisältää kolme ruudukkoa.
CSS: ssä ruudukko on näyttö: ruudukko; omaisuus ja ruudukon kohteet omistaa grid-alue joka tunnistaa ruudukkoalueen nimet.
Me myös lisää grid-template-alueilla omaisuus ruudukon säiliöön, jossa ruudukon nimiä käytetään määritä ruudukon alueet ruudukon soluille, joita ne edustavat.
Kaikki sarakkeet kestää yhden fraktion (FR) säiliön leveyden varmistaminen, mikä varmistaa verkkoelementtien suojaamisen.
.grid-container display: grid; grid-template-alueet: 'vasen keski oikealle'; grid-template-columns: toista (3, 1fr); ruudukko-rivit: 80px; ruudukko: 5px; leveys: 360px; taustaväri: magenta; .grid-left grid-area: left; .grid-center grid-area: center; .grid-right ruudukko: oikea; .grid-container div taustaväri: vaalea;
Ylivuoto-ruudukon kohteet
Voit tehdä ruudukon ylivuoto sen ruudukon säiliöstä jos se on tarpeen asettelun kannalta. Ylivuotovaikutuksen saavuttamiseksi sinun tarvitsee vain käytä eri sarakekokoa:
.grid-container display: grid; grid-template-alueet: 'vasen keski oikealle'; grid-template-columns: toista (3, 150px); ruudukko: 5px;
sarakkeen ja aukon koko on suurempi kuin säiliön leveys, joka aiheuttaa ruudukon ylimääräisen säiliön.
Päällekkäiset ristikkokohdat
ruudukko voi päällekkäin (kokonaan tai osittain) toinen ruudukko seuraavissa tapauksissa:
- Se on asetettu kattamaan toisen ruudukon kohteen solut (tai yli).
- Sen koko on kasvanut, jolloin se on päällekkäinen lähellä olevan ruudukon kanssa.
- Se siirretään toisen ruudukon päälle.
Keskustelemme myöhemmin toisesta ja kolmannesta tapauksesta “Mitoitus” ja “Liikkuva” osiot.
Ensin katsotaan ensimmäinen tapaus, kun ruudukko on kattaa toisen.
Keskuksen ruudukko on käännetty vasemmalle, joten vain kaksi kohdetta näkyy näytöllä.
.verkko-keskus grid-area: centre; ruudukon sarake: 1/3;
grid-sarake ja grid-rivi ominaisuudet määritä ruudukon linjat jonka välissä sarakkeen tai rivin täytyy sopia.
Alla olevassa kaaviossa näet, miten ruudukon sarake: 1/3 CSS-sääntö toimii: keskipylväs kattaa ruudukon linjat 1 ja 3. Tämän seurauksena keskipylväs peittää vasemman.
Siirrä ruudukon kohteita
Siirrymällä tarkoitan siirretään kohteita hieman. Jos haluat täysin siirtää kohteen toiseen verkkoon / alueeseen, suosittelen, että päivität ruudukon luontikoodin.
Ruudukkoelementtien siirtäminen on helppoa. Vain Käytä marginaali, muuttaa, tai kanta: suhteellinen; ominaisuudet. Katso alla, miten kohteet siirretään käyttämällä näitä ominaisuuksia.
Keski- ja oikeanpuoleiset ruudukon kohteet voidaan siirtää (kuten edellä on esitetty) seuraavilla tavoilla:
1. Käyttämällä marginaali
Negatiiviset marginaalit lisäävät ruudukon kohtia, kun taas positiiviset marginaalit leikkaavat ne. Käyttämällä molempien yhdistelmää, voit siirtää ruudukon kohteita ympäriinsä.
.verkko-keskus grid-area: centre; margin-left: -10px; marginaali-oikea: 10px; margin-top: -10px; marginaalipohja: 10px; .grid-right ruudukko: oikea; margin-left: 10px; marginaali-oikea: -10px; margin-top: -10px; marginaalipohja: 10px;
2. Käyttäminen muuttaa
Kääntää() CSS-toiminto siirtää elementtiä x- ja y-akseleita pitkin. Käyttämällä sitä yhdessä muuttaa ominaisuuden avulla voit muuttaa ruudukon kohteen sijaintia.
.verkko-keskus grid-area: centre; muunnos: kääntää (-10px, -10px); .grid-right ruudukko: oikea; muunnos: kääntää (10px, -10px);
3. Käyttäminen asento
Käyttämällä asema: suhteellinen; säännön kanssa ylin, pohja, vasen, ja oikea ominaisuuksia voidaan käyttää myös ruudukon kohteiden liikkumiseen.
.verkko-keskus grid-area: centre; asema: suhteellinen; pohja: 10px; oikea: 10px; .grid-right ruudukko: oikea; asema: suhteellinen; pohja: 10px; vasen: 10px;
Tilaa ruudukon kohteita
Ruudukon kohteet esitetään näytöllä siinä järjestyksessä kuin ne näkyvät HTML-lähdekoodissa.
Edellisessä osassa, kun keskikohta siirrettiin vasemmalle, selain asetti sen vasemman kohteen päälle. Tämä tapahtui HTML: ssä, Voimme kuitenkin vaihda tilausruudukon kohteita käyttämällä Käyttämällä Kuten CSS Grid Layout -moduulissa, elementin järjestystä muutetaan HTML: ssä ei vaikuta ruudukon asetteluun, voit myös laittaa Jos käytät ruudukkoalueen automaattisia rivejä tai sarakkeita (käyttämällä Muista, että kaikissa kolmessa sarakkeessa on otosverkostossa yksi jae ( Tässä muutamme vasemman kohteen kokoa käyttämällä Tässä muutamme vasemman kohteen kokoa käyttämällä z-index tai tilata CSS-ominaisuudet.
z-indeksi: 1; sääntö, vasemman ruudukon kohta sain korkeamman pinon.. ruudukon vasen ruudukko: vasen; z-indeksi: 1;
Koko ruudukko
auto, FR, gr yksikköä), se kutistuu, jotta sen naapurikohta on kasvanut vain jos mainitun kohteen ei ole mitoitettu muuttaa tai negatiivinen marginaali.FR) ruudukon säiliöstä. Katsokaa, miten kaikki kolme kohdetta näyttävät vasemmiston koon muuttamisesta kahdella eri tavalla.1. Koottu
leveys ja korkeusleveys ja korkeus ominaisuudet. Tämän seurauksena se pysyy ruudukon säiliön sisällä.
.ruudukon vasen ruudukko: vasen; leveys: 200px; korkeus: 90px;
2. Mitoitettu
muuttaamuuttaa omaisuus. Tämän seurauksena se täyttää säiliön ja ruudukon aukko katoaa.
.ruudukon vasen ruudukko: vasen; muunnos: scalex (1.8);
