Elementide liigutamine CSS-i võrgukujunduses [Guide]
Kasutades CSS Grid Layout Module veebidisainis muutub üha enam teostatavaks, kui hakatakse rohkem brausereid seda toetada. Võrgustiku rakke täitvate paigutuste loomisel võib siiski tekkida hetk, kui soovite saavutada keerulisemaid asju.
Näiteks võite soovida veidi liikuda mõned võrgupunktid on oma võrgupiirkondades kinni jäänud. Sa võid ka soovida viige need võrgukonteinerist välja (ülevool) või üle üksteise (kattuvad) või lihtsalt… tühja ruumi ümber.
Niisiis, selles postituses näitan sulle, kuidas saate liikuda, tellida, ülevoolu, kattumist ja suurusega võrgupunkte CSS Grid Layout Module'i kasutamisel.
Looge CSS-võrk
Esmalt looge lihtne CSS-võrk üks rida ja kolm veergu.
HTML-is luuakse hunnik divs, kus võrgukonteiner on olemas sisaldab kolme ruudustikku.
CSS-is on võrgukonteiner on kuva: võrk; vara ja võrgu elemendid on võrgupiirkond mis identifitseerib võrgupunkti piirkondade nimed.
Meil ka lisa grid-mall-alad vara ruudukonteinerisse, kus on harjunud võrgupiirkonna nimesid määrata võrgupiirkonnad nende esindatud võrgurakkudele.
Kõik veerud võtke ühe fraktsiooni suurusfr) mahuti laiusest, tagades võrgupunktide isoleerimise.
.grid-konteiner kuva: võrk; grid-malli-alad: „vasakpoolne parem pool”; grid-template-columns: korrake (3, 1fr); grid-template-read: 80px; võrgupuudus: 5 px; laius: 360 px; taustavärv: magenta; .grid-left grid-area: left; .grid-center grid-area: center; .grid-right grid-area: right; .grid-container div taustavärv: heleroheline;
Ülevooluvõrgu elemendid
Võid teha ruudustiku ülevoolu oma võrgukonteiner kui see on paigutuse jaoks vajalik. Ülevoolu efekti saavutamiseks peate lihtsalt tegema kasutage erinevat veeru suurust:
.grid-konteiner kuva: võrk; grid-malli-alad: „vasakpoolne parem pool”; grid-template-columns: korrake (3, 150px); võrgupuudus: 5 px;
The veergu ja tühiku suurust on suurem kui mahuti laius, mis põhjustab võrgupunktide ülevoolu.
Ülekatte võrgu elemendid
A Võrguüksus võib kattuda (täielikult või osaliselt) teine võrgupunkt järgmistel juhtudel:
- See on seatud teise ruudustiku lahtri (de) üle (ja üle).
- Selle suurus on suurenenud, põhjustades selle kattumise lähedal asuva võrgupunktiga.
- See liigutatakse teise ruudustiku peal.
Järgnevalt arutame teist ja kolmandat juhtumit “Suurus” ja “Liikumine” lõigud.
Kõigepealt vaatame esimest juhtumit, kui ruudustik ulatub üle teise.
Keskel on keskpunkt üle vasakpoolse, seega kuvatakse ekraanil ainult kaks elementi.
.võrgukeskus grid-area: centre; ruudukujuline veerg: 1/3;
The ruudustik ja ruudustik omadused määrata ruudustiku read mille vahel peab veerg või rida sobima.
Alloleval joonisel on näha, kuidas grid-veerg: 1/3 CSS reegel toimib: keskmist veergu ulatub võrgu joonte 1 ja 3 vahele. Selle tulemusena kattub keskmises veerus vasakpoolne.
Liiguta võrgupunkte
Liigutades mõtlen üksuste liigutamine veidi ümber. Kui soovid objekti ümber paigutada teise võrgurakku / -piirkonda, soovitan teil värskendada võrgu loomise koodi.
Võrguüksuste ümber liikumine on lihtne. Lihtsalt kasuta marginaal, the teisendada, või positsioon: suhteline; omadused. Vaadake allpool, kuidas neid objekte neid omadusi kasutades liigutatakse.
Kesk- ja parempoolseid võrgupunkte saab teisaldada (nagu eespool näidatud) järgmistel viisidel:
1. Kasutamine marginaal
Negatiivsed marginaalid suurendavad võrgupunktide mõõtmeid, samas kui positiivsed marginaalid piiravad neid. Kasutades mõlema kombinatsiooni, saate ruudustikku liigutada ümber.
.võrgukeskus grid-area: centre; margin-left: -10px; marginaali paremale: 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. Kasutamine teisendada
The tõlkida () CSS-funktsioon liigutab elementi x- ja y-telgedel. Kasutades seda koos teisendada Omaduse abil saate muuta ruudustiku asukohta.
.võrgukeskus grid-area: centre; transform: translate (-10px, -10px); .grid-right grid-area: right; transform: translate (10px, -10px);
3. Kasutamine positsiooni
Kasutades positsioon: suhteline; reeglitega määratud top, põhja, vasakule, ja õigus omadusi saab kasutada ka võrguseadmete liikumiseks.
.võrgukeskus grid-area: centre; positsioon: suhteline; põhi: 10px; paremale: 10px; .grid-right grid-area: right; positsioon: suhteline; põhi: 10px; vasakule: 10px;
Telli võrgupunkte
Võrgustiku elemendid kuvatakse ekraanil järjekorras, kui need ilmuvad HTML-lähtekoodi.
Eelmises lõigus, kui keskpunkti liigutati vasakule, paigutas see brauseri vasakpoolse elemendi peale. See juhtus, sest HTML-is, Kuid me saame muutke tellimusresti elemente kasutades Kasutades Nagu CSS Grid Layouti moodulis, muutke HTML-i elementide järjekorda ei mõjuta võrgusüsteemi paigutust, võite ka panna Kui kasutate ruudustiku jaoks automaatse suurusega ridu või veerge (kasutades Pidage meeles, et meie proovivõrgus on kõik kolm veergu üks fraktsioon ( Siin muudame vasaku elemendi suurust kasutades Siin muudame vasaku elemendi suurust kasutades z-indeks või järjekorras CSS-i omadused.
z-indeks: 1; reegel, vasakvõrgu element sain kõrgema virnastamise konteksti.. grid-left grid-area: left; z-indeks: 1;
Suuruse ruudustik
automaatne, fr, gr ühikutes), see väheneb, et muuta oma naabruses asuvale objektile, mis on kasvanud ainult kui nimetatud üksus ei olnud suuruse järgi teisendada või negatiivne marginaal.fr) ruudukonteiner. Heitke pilk sellele, kuidas kõik kolm üksust välja näevad pärast seda, kui vasakpoolne on kahel erineval viisil muudetud.1. Suurusega
laius ja kõrguslaius ja kõrgus omadused. Selle tulemusena jääb see ruudukonteinerisse.
.grid-left grid-area: left; laius: 200 px; kõrgus: 90 px;
2. Suurusega
teisendadateisendada vara. Selle tulemusena ületab see konteineri ja ka kaob võrgupuudus.
.grid-left grid-area: left; transform: scalex (1.8);
