Premikanje elementov v razpredelnici CSS Grid [Guide]
Uporabljati Modul za postavitev mreže CSS v spletnem oblikovanju postaja vse bolj in bolj izvedljivo, ko se začne več brskalnikov podprite. Medtem ko ustvarjate postavitve, ki zapolnjujejo celice mreže, lahko pride do trenutka, ko želite doseči bolj zapletene stvari.
Na primer, morda boste želeli rahlo se premikajte nekateri elementi mreže so obtičali v njihovih mrežah. Morda boste želeli premaknite jih iz mrežnega vsebnika (preliv) ali med seboj (prekrivajo), ali samo… na nekaj praznega prostora okoli.
Torej, na tem mestu vam bom pokazal, kako lahko mrežne elemente premikanja, naročanja, prelivanja, prekrivanja in velikosti ko uporabljate modul za postavitev mrežnega središča CSS.
Ustvarite mrežo CSS
Najprej ustvarimo preprosto CSS mrežo z ena vrstica in trije stolpci.
V HTML-u ustvarimo kup divov, kjer je mrežni vsebnik vsebuje tri elemente mreže.
V CSS-ju je mrežni vsebnik ima prikaz: mreža; nepremičnine in mrežne elemente imajo omrežje ki identificira imena področij elementov omrežja.
Smo tudi dodajte omrežja-predloge nepremičnine v mrežni vsebnik, v katerem so uporabljena imena območja omrežja dodeli mrežna področja mrežnim celicam, ki jih predstavljajo.
Vsi stolpci sprejme velikost ene frakcije (fr) širine posode, ki zagotavlja zadrževanje mrežnih elementov.
.mrežni vsebnik prikaz: mreža; polja-predlog-območja: "levo sredina desno"; grid-template-column: repeat (3, 1fr); grid-template-rows: 80px; vrzel v mreži: 5px; širina: 360px; barva ozadja: magenta; .grid-left grid-area: left; .grid-center grid-area: center; grid-right grid-area: desno; .grid-container div barva ozadja: svetlo zelena;
Presežni elementi mreže
Lahko naredite element mreže prelivajo mrežni vsebnik če je to potrebno za postavitev. Da bi dosegli učinek prelivanja, morate le uporabite drugačno velikost stolpca:
.mrežni vsebnik prikaz: mreža; polja-predlog-območja: "levo sredina desno"; grid-template-column: repeat (3, 150px); vrzel v mreži: 5px;
The vsota velikosti stolpca in vrzeli je večji od širino posode, ki povzroči, da se predmeti mreže prelivajo iz vsebnika.
Prekrivanje elementov mreže
A element se lahko prekriva (v celoti ali delno pokrita) drugega elementa omrežja v naslednjih primerih:
- Nastavljena je tako, da se razteza čez (in nad) celico (e) drugega elementa omrežja.
- Njegova velikost se je povečala, zaradi česar se prekriva z bližnjim elementom mreže.
- Premaknjena je nad drugo postavko mreže.
O drugem in tretjem primeru bomo razpravljali kasneje, v “Velikosti” in “Premikanje” odsekov.
Najprej poglejmo prvi primer, ko je postavka mreže se razteza čez drugo.
Element mreže v središču ima na levi, tako da sta na zaslonu vidna samo dva elementa.
.grid-center grid-area: center; mrežni stolpec: 1/3;
The mrežni stolpec in mrežna vrstica lastnosti dodeli mrežne črte med katerimi mora ustrezati stolpec ali vrstica.
Na spodnjem diagramu lahko vidite, kako mrežni stolpec: 1/3 Pravilo CSS deluje: srednji stolpec prehaja med mrežnimi linijami 1 in 3. Zato se srednji stolpec prekriva z levo.
Premakni elemente mreže
S premikanjem, mislim premikanje predmetov nekoliko okoli. Če želite popolnoma premakniti element v drugo celico / področje mreže, vam priporočam, da posodobite kodo za ustvarjanje omrežja.
Premikanje po elementih mreže je preprosto. Samo uporabi marže, transform, ali položaj: relativna; lastnosti. Spodaj si oglejte, kako se predmeti premikajo z uporabo teh lastnosti.
Središčne in desne mrežne elemente lahko premikate (kot je prikazano zgoraj) na naslednje načine:
1. Uporaba marže
Negativne marže povečujejo dimenzije mrežnih elementov, pozitivne robove pa obrezujejo. Z uporabo kombinacije obeh lahko premikate mrežne elemente okoli.
.grid-center grid-area: center; margin-left: -10px; margin-right: 10px; rob-top: -10px; margin-bottom: 10px; grid-right grid-area: desno; margin-left: 10px; margin-right: -10px; rob-top: -10px; margin-bottom: 10px;
2. Uporaba transform
The prevesti() Funkcija CSS premakne element vzdolž osi x in y. Uporabite ga skupaj z transform lastnost vam omogoča, da spremenite položaj elementa mreže.
.grid-center grid-area: center; transform: translate (-10px, -10px); grid-right grid-area: desno; transform: translate (10px, -10px);
3. Uporaba položaj
Uporabljati položaj: relativna; pravilo z navedenim na vrh, spodaj, levo, in prav lastnosti se lahko uporabljajo tudi za premikanje po postavkah mreže.
.grid-center grid-area: center; položaj: relativna; spodaj: 10px; desno: 10px; grid-right grid-area: desno; položaj: relativna; spodaj: 10px; levo: 10px;
Naročite elemente mreže
Postavke na zaslonu se prikažejo v vrstnem redu, v katerem se pojavijo v izvorni kodi HTML.
V prejšnjem razdelku, ko je bil osrednji element premaknjen v levo, je bil brskalnik postavljen na vrh levega elementa. To se je zgodilo, ker v HTML-ju, Vendar pa lahko spremenite elemente vrstnega reda uporabljati Uporabljati Kot v modulu CSS Grid Layout, spremenite vrstni red elementov v HTML-ju ne vpliva na postavitev omrežja, lahko tudi Če uporabljate vrstice ali stolpce samodejne velikosti za element omrežja (z uporabo Ne pozabite, da v našem vzorčnem omrežju vsi trije stolpci vzamejo eno frakcijo ( Tukaj spreminjamo velikost levega elementa uporabljati Tukaj spreminjamo velikost levega elementa uporabljati z-indeks ali red Lastnosti CSS.
z-indeks: 1; pravilo, levi element mreže dobil večji kontekst zlaganja.. mrežo levo območje mreže: levo; z-indeks: 1;
Velikost mrežnih elementov
samodejno, fr, gr enote), se bo skrčil, da bi naredil prostor za sosednji predmet, ki je zrasel samo če omenjeni predmet ni bila razvrščena transform ali negativna marža.fr) vsebnika na mreži. Oglejte si, kako izgledajo vsi trije elementi, potem ko se levo spremeni na dva različna načina.1. Velikost z
premer in višinepremer in višine lastnosti. Posledično ostane znotraj mrežnega vsebnika.
.mrežo levo območje mreže: levo; širina: 200px; višina: 90px;
2. Velikost z
transformtransform nepremičnine. Posledica tega je, da se zabojnik preliva in tudi vrzel v omrežju izgine.
.mrežo levo območje mreže: levo; transformacija: scalex (1.8);
