Mutarea elementelor în layout-ul Grid-ului CSS [Ghid]
Utilizarea funcției Modul de configurare a rețelei CSS în designul web devine din ce în ce mai fezabil pe măsură ce mai multe browsere încep să susține-o. În timp ce creați planuri care completează celulele rețelei, s-ar putea să vină un moment, însă, atunci când doriți să obțineți lucruri mai complicate.
De exemplu, ați putea dori să mișcă puțin unele dintre elementele grilei blocate în zonele lor de rețea. De asemenea, ați putea dori scoateți-le din containerul de rețea (supraîncărcare) sau unul peste celălalt (suprapunere), sau doar ... într-un spațiu gol în jur.
Deci, în acest post, vă voi arăta cum puteți mutați, ordonați, depășiți, suprapun și elemente de dimensiune a grilei când utilizați modulul CSS Grid Layout.
Creați o rețea CSS
Mai întâi, să creăm o simplă rețea CSS cu un rând și trei coloane.
În HTML, vom crea o grămadă de divs în cazul în care containerul grilă conține cele trei elemente din rețea.
În CSS, containerul de rețea are afișare: grilă; proprietate și elementele rețelei avea grid-area care identifică numele zonelor elementelor de rețea.
Noi Deasemenea adaugă grid-șablon-zone proprietate la containerul de rețea, în care sunt folosite numele zonelor de rețea atribuiți ariile de rețea celulelor de rețea pe care le reprezintă.
Toate coloanele dimensiunea unei fracții (fr) a lățimii recipientului, asigurând izolarea elementelor de rețea.
.grilă-container display: grilă; grilă-șablon-zone: "stânga centru dreapta"; grilă-șablon-coloane: repeat (3, 1fr); grilă-șablon-rânduri: 80px; grilă-decalaj: 5 pixeli; lățime: 360px; fundal-culoare: magenta; .grid-stânga zona grilă: stânga; . centru-centru zona grilă: centru; . grilă-dreapta zona grilă: dreapta; .grid-container div culoare-fundal: lumină verde;
Elemente de grila de overflow
Puteți face un element de rețea supraîncărcați containerul de rețea dacă este necesar pentru un aspect. Pentru a obține efectul de supraîncărcare, trebuie doar să utilizați o altă dimensiune a coloanei:
.grilă-container display: grilă; grilă-șablon-zone: "stânga centru dreapta"; grilă-șablon-coloane: repetați (3, 150px); grilă-decalaj: 5 pixeli;
suma dimensiunii coloanei și a diferenței este mai mare decât lățimea containerului, care determină ca elementele grilei să își depășească rezervorul.
Suprapune elemente de grila
A elementul grilă se poate suprapune (acoperire totală sau parțială) un alt element din rețea în următoarele cazuri:
- Este setat să se întindă peste (și peste) celula unui alt element de rețea.
- Dimensiunea sa a fost mărită, determinând-o să se suprapună cu elementul de rețea din apropiere.
- A trecut peste un alt element de rețea.
Vom discuta despre al doilea și al treilea caz mai târziu, în “Dimensionarea” și “In miscare” secțiuni.
Mai întâi, să vedem primul caz când un element din rețea se întinde pe un altul.
Elementul grilei din centru are cuprins pe partea stângă, astfel încât numai două elemente sunt vizibile pe ecran.
.grilă-centru grid-area: center; grilă-coloană: 1/3;
grilă coloană și grilă rând proprietăţi atribuiți linii de rețea între care trebuie să se potrivească o coloană sau un rând.
În diagrama de mai jos, puteți vedea cum grilă-coloană: 1/3 Funcția CSS funcționează: coloana centrală se întind între liniile de rețea 1 și 3. Ca urmare, coloana centrală se suprapune pe cea stângă.
Deplasați elementele de rețea
Prin mișcare, vreau să spun mișcarea obiectelor ușor în jur. Dacă doriți complet să mutați un element într-o altă celulă / zonă de rețea, vă recomandăm să actualizați codul de creare a rețelei.
Deplasarea în jurul elementelor de rețea este simplă. Doar folosește margine, transforma, sau Poziția: relativă; proprietăţi. Vedeți mai jos cum sunt mutate elementele utilizând acele proprietăți.
Elementele centrale și cele din dreapta pot fi mutate (după cum se arată mai sus) în următoarele moduri:
1. Utilizarea margine
Marjele negative cresc dimensiunile elementelor de rețea, în timp ce marjele pozitive le elimină. Folosind o combinație a celor două, puteți mișca ușor elementele de rețea din jur.
.grilă-centru grid-area: center; margin-stânga: -10px; marginea-dreapta: 10px; margin-top: -10px; margin-bottom: 10px; . grilă-dreapta zona grilă: dreapta; margin-stânga: 10px; margin-dreapta: -10px; margin-top: -10px; margin-bottom: 10px;
2. Utilizarea transforma
Traduceți() Funcția CSS deplasează un element de-a lungul axelor x și y. Utilizarea acestuia împreună cu transforma proprietate vă permite să schimbați poziția unui element de rețea.
.grilă-centru grid-area: center; transformă: traduce (-10px, -10px); . grilă-dreapta zona grilă: dreapta; transformă: traduce (10px, -10px);
3. Utilizarea poziţie
Utilizarea funcției poziția: relativă; regula cu specificat top, fund, stânga, și dreapta proprietățile pot fi folosite și pentru deplasarea în jurul elementelor de rețea.
.grilă-centru grid-area: center; poziția: relativă; fund: 10px; dreapta: 10px; . grilă-dreapta zona grilă: dreapta; poziția: relativă; fund: 10px; stânga: 10px;
Comandați elemente de rețea
Elementele grilei sunt redate pe ecran în ordinea în care apar în codul sursă HTML.
În secțiunea anterioară, când elementul central a fost mutat spre stânga, acesta a fost plasat în partea superioară a elementului stâng de browser. Acest lucru sa întâmplat deoarece în HTML, Cu toate acestea, putem modificați elementele din grila de comandă folosind Utilizarea funcției Ca și în modulul CSS Grid Layout, schimbarea ordinii elementelor în HTML nu afectează aspectul rețelei, puteți pune, de asemenea Dacă utilizați rânduri sau coloane de dimensiuni automate pentru un element din rețea (utilizând Rețineți că, în grila noastră de eșantion, toate cele trei coloane iau o fracțiune ( Aici modificăm mărimea elementului stâng folosind Aici modificăm mărimea elementului stâng folosind z-index sau Ordin Proprietăți CSS.
z-index: 1; regula, elementul din stânga al grila au un context de stivuire mai mare.. grilă-stânga zona grilă: stânga; z-index: 1;
Elemente de grila de dimensiuni
auto, fr, gr unități), se va micșora pentru a face spațiu pentru elementul învecinat care a crescut în dimensiune doar dacă articolul menționat nu a fost dimensionat de transforma sau o marjă negativă.fr) a containerului de rețea. Aruncați o privire la modul în care ar arăta toate cele trei elemente după ce partea stângă este redimensionată în două moduri diferite.1. Dimensiune cu
lăţime și înălţimelăţime și înălţime proprietăţi. Ca urmare, acesta rămâne în interiorul containerului de rețea.
.grilă-stânga zona grilă: stânga; lățime: 200px; înălțime: 90px;
2. Dimensiune cu
transformatransforma proprietate. În consecință, acesta deviază peste container, iar dispariția grilei de rețea.
.grilă-stânga zona grilă: stânga; transformare: scalex (1,8);
