Premještanje stavki u CSS rasporedu mreže [Vodič]
Koristiti CSS modul rasporeda mreže u web dizajnu postaje sve više i više izvedivo kao i više preglednika početi podržite ga. Pri izradi izgleda popunjavanja rešetkastih ćelija, možda će doći trenutak kada želite postići složenije stvari.
Na primjer, možda želite lagano se kretati neke od rešetkastih stavki zaglavljene u njihovim mrežnim područjima. Također možete poželjeti premjestite ih iz rešetkastog spremnika (prelijevanje), ili jedan preko drugoga (preklapaju se), ili samo… na neki prazan prostor oko sebe.
Dakle, u ovom postu, pokazat ću vam kako možete stavke za kretanje, redoslijed, prelijevanje, preklapanje i veličinu kada koristite CSS modul rasporeda mreže.
Stvorite CSS mrežu
Prvo stvorimo jednostavnu CSS mrežu jedan redak i tri stupca.
U HTML-u stvaramo hrpu divova gdje je kontejner mreže sadrži tri stavke mreže.
U CSS-u, mrežni spremnik ima prikaz: rešetka; svojstvo i stavke mreže imati Rešetka-područje koja identificira nazive područja stavke mreže.
Mi također dodajte rešetke-predloška-područja svojstvo u kontejner mreže, u kojem se koriste nazivi područja mreže dodijeliti područja mreže mrežama ćelija koje predstavljaju.
Svi stupci uzeti veličinu od jedne frakcije (fr) širine spremnika, čime se osigurava zadržavanje elemenata rešetke.
.rešetka-spremnik prikaz: rešetka; grid-template-područja: 'lijevo središte desno'; grid-template-stupci: repeat (3, 1fr); grid-template-redovi: 80px; rascjep mreže: 5px; širina: 360px; pozadinska boja: magenta; .grid-lijevo područje mreže: lijevo; .grid-centar grid-područje: centar; .grid-desno grid-area: desno; .grid-container div boja pozadine: svjetlozelena;
Preljevne stavke mreže
Možete napraviti stavku mreže prelijevati svoj mrežni spremnik ako je to potrebno za raspored. Da biste postigli efekt prelijevanja, samo trebate koristite drugu veličinu stupca:
.rešetka-spremnik prikaz: rešetka; grid-template-područja: 'lijevo središte desno'; grid-template-stupci: repeat (3, 150px); rascjep mreže: 5px;
zbroj veličine stupca i razmaka je veći od širina spremnika, što uzrokuje prelijevanje rešetkastih predmeta.
Preklapanje stavki mreže
stavka mreže može se preklapati (potpuno ili djelomično pokriti) drugu stavku mreže u sljedećim slučajevima:
- Postavljeno je da prelazi preko (i više) ćelija druge stavke mreže.
- Njegova je veličina povećana, zbog čega se preklapa s obližnjom stavkom mreže.
- Prebacuje se iznad druge stavke mreže.
Kasnije ćemo raspravljati o drugom i trećem slučaju “dimenzioniranje” i “Premještanje” dijelovi.
Prvo, da vidimo prvi slučaj kada je stavka mreže obuhvaća drugu.
Stavka mreže u središtu ima prekriven lijevom, tako da su na zaslonu vidljive samo dvije stavke.
.grid-centar grid-područje: centar; rešetka-stupac: 1/3;
rešetke kolona i Rešetka red nekretnine dodijeliti linije mreže između kojih stupac ili red treba stati.
Na donjem dijagramu možete vidjeti kako stupac mreže: 1/3 CSS pravilo radi: središnji stupac se proteže između linija 1 i 3. Zbog toga se središnji stupac preklapa s lijevim.
Premještanje stavki mreže
Pomicanjem, mislim pomicanjem stavki malo. Ako u potpunosti želite premjestiti stavku u drugu ćeliju / područje mreže, preporučujem vam da ažurirate kod stvaranja mreže.
Kretanje po rešetkama je jednostavno. Samo koristiti margina, transformirati, ili Položaj: relativna; nekretnine. U nastavku pogledajte kako se stavke premještaju pomoću tih svojstava.
Središnje i desne mrežne stavke mogu se premjestiti (kao što je prikazano gore) na sljedeće načine:
1. Korištenje margina
Negativne margine povećavaju dimenzije elemenata mreže, dok ih pozitivne margine smanjuju. Koristeći kombinaciju oba, možete pomicati rešetke oko sebe.
.grid-centar grid-područje: centar; margina lijevo: -10px; margin-right: 10px; margina-vrh: -10px; margin-bottom: 10px; .grid-desno grid-area: desno; margin-left: 10px; margin-right: -10px; margina-vrh: -10px; margin-bottom: 10px;
2. Korištenje transformirati
Prevedi() CSS funkcija pomiče element duž osi x i y. Koristiti ga zajedno s transformirati svojstvo omogućuje vam da promijenite položaj stavke mreže.
.grid-centar grid-područje: centar; transform: translate (-10px, -10px); .grid-desno grid-area: desno; transform: translate (10px, -10px);
3. Korištenje položaj
Koristiti pozicija: relativna; pravilo s navedenim vrh, dno, lijevo, i pravo svojstva mogu se koristiti i za kretanje po rešetkama.
.grid-centar grid-područje: centar; pozicija: relativna; dno: 10px; desno: 10px; .grid-desno grid-area: desno; pozicija: relativna; dno: 10px; lijevo: 10px;
Naručite stavke mreže
Stavke mreže prikazuju se na zaslonu redoslijedom u HTML izvornom kodu.
U prethodnom odjeljku, kada je središnja stavka premještena ulijevo, preglednik ju je stavio na vrh lijeve stavke. To se dogodilo jer je u HTML-u, Međutim, možemo promijenite stavke mreže narudžbi koristiti Koristiti Kao u CSS Grid Layout modulu, mijenjanje redoslijeda elemenata u HTML-u ne utječe na raspored mreže, također možete staviti Ako koristite retke ili stupce automatske veličine za stavku mreže (pomoću Zapamtite, u našoj uzorku mreže sve tri stupca uzimaju jednu frakciju ( Ovdje mijenjamo veličinu lijeve stavke koristiti Ovdje mijenjamo veličinu lijeve stavke koristiti z-index ili narudžba CSS svojstva.
z-indeks: 1; pravilo, lijevi element mreže dobio je veći kontekst slaganja.. mreža lijevo područje mreže: lijevo; z-indeks: 1;
Veličina rešetke
auto, fr, gr jedinica), smanjit će se kako bi napravila mjesta za susjednu stavku koja je narasla u veličini samo ako navedenu stavku nije veličine transformirati ili negativna marža.fr) mrežnog spremnika. Pogledajte kako izgledaju sve tri stavke nakon što se lijeva promijeni na dva različita načina.1. Veličina s
širina i visinaširina i visina nekretnine. Kao rezultat toga, ostaje unutar rešetkastog spremnika.
.mreža lijevo područje mreže: lijevo; širina: 200px; visina: 90px;
2. Veličine s
transformiratitransformirati svojstvo. Kao rezultat, ona prelijeva spremnik, a rascjep mreže također nestaje.
.mreža lijevo područje mreže: lijevo; transformacija: scalex (1.8);
