Perkelti elementus CSS tinklelio išdėstyme [Vadovas]
Naudojant CSS tinklelio išdėstymo modulis web dizainas tampa vis labiau įmanomas, nes pradeda veikti daugiau naršyklių remti. Kuriant maketus, užpildančius tinklelio ląsteles, gali pasirodyti momentas, kai norite pasiekti sudėtingesnių dalykų.
Pavyzdžiui, galbūt norėsite šiek tiek judėti kai kurie tinklelio elementai įstrigo jų tinklo vietose. Taip pat galbūt norėsite perkelkite juos iš tinklelio konteinerio (perpildymas), arba vienas kitą (persidengimas), arba tiesiog… tam tikrą tuščią erdvę.
Taigi, šiame pranešime jums parodysiu, kaip galite perkelti, užsisakyti, perpildyti, persidengti ir dydžio tinklelį kai naudojate CSS Grid Layout Module.
Sukurkite CSS tinklelį
Pirma, sukurkime paprastą CSS tinklelį su viena eilutė ir trys stulpeliai.
HTML, mes sukuriame divs krūva, kur tinklelio konteineris yra trys tinklo elementai.
CSS sistemoje tinklelis turi ekranas: tinklelis; nuosavybė ir tinklo elementus turėti tinklo plotas nurodo tinklo elementų sričių pavadinimus.
Mes taip pat pridėkite tinklo šablonų sritys nuosavybė į tinklelio talpyklą, į kurią įprasti tinklelio pavadinimai priskirti tinklelio sritis jiems atstovaujamiems tinklelio elementams.
Visi stulpeliai imtis vienos frakcijos dydžiofr) konteinerio pločio, užtikrinant tinklo elementų izoliavimą.
.tinklelis-konteineris ekranas: tinklelis; tinklelio šablonų sritys: „kairysis centras dešinėn“; tinklelio šablonai: kartoti (3, 1fr); tinklelio šablonai: 80px; tinklelio tarpas: 5px; plotis: 360 pikselių; fono spalva: rausvai raudona; .grid-left grid area: left; .grid-centre grid-area: centre; .grid-right grid-area: right; .grid-container div fono spalva: šviesiai;
Perpildymo tinklo elementai
Galite sukurti tinklelio elementą perpildyti tinklo tinklelį jei tai būtina išdėstymui. Norint pasiekti perpildymo efektą, jums reikia naudoti kitą stulpelio dydį:
.tinklelis-konteineris ekranas: tinklelis; tinklelio šablonų sritys: „kairysis centras dešinėn“; tinklelio šablonai: pakartoti (3, 150px); tinklelio tarpas: 5px;
The stulpelio ir tarpo dydžio suma yra didesnis nei konteinerio plotis, kuris sukelia tinklelio elementų perpildymą.
Perdengti tinklelio elementus
A tinklelio elementas gali sutapti (visiškai arba iš dalies padengti) kitą tinklo elementą šiais atvejais:
- Jis nustatytas kitam tinklo elemento (-ų) langui (-ams).
- Jo dydis padidėjo, todėl jis sutampa su netoliese esančiu tinklelio elementu.
- Jis perkeltas ant kito tinklo elemento.
Vėliau aptarsime antrąjį ir trečiąjį atvejus “Dydis” ir “Judėjimas” skyriuose.
Pirma, pamatysime pirmąjį atvejį, kai tinklelio elementas apima kitą.
Tinklo elementas centre yra per kairę, todėl ekrane matomi tik du elementai.
.tinklo centras grid-area: centre; tinklelio stulpelis: 1/3;
The tinklelio stulpelis ir tinklelio eilutė savybės priskirti tinklelio linijas tarp kurių stulpelis arba eilutė turi atitikti.
Žemiau esančioje diagramoje galite pamatyti, kaip tinklelio stulpelis: 1/3 CSS taisyklė veikia: centrinis stulpelis tarp 1 ir 3 tinklelio linijų. Dėl to centrinis stulpelis sutampa su kairiuoju.
Perkelkite tinklelio elementus
Judėdamas, aš turiu galvoje elementų perkėlimas šiek tiek aplink. Jei visiškai norite perkelti elementą į kitą tinklo langelį / sritį, rekomenduoju atnaujinti tinklelio kūrimo kodą.
Perėjimas prie tinklo elementų yra paprastas. Tiesiog naudoti marža, transformuoti, arba pozicija: santykinis; savybės. Žiūrėkite žemiau, kaip elementai perkeliami naudojant šias savybes.
Vidurio ir dešiniojo tinklelio elementus galima perkelti (kaip parodyta aukščiau) šiais būdais:
1. Naudojimas marža
Neigiamos maržos padidina tinklo elementų matmenis, o teigiamos paraštės jas supjausto. Naudodamiesi abiejų deriniu, galite judėti tinklelio elementus aplink.
.tinklo centras grid-area: centre; margin-left: -10px; paraštė dešinėje: 10px; margin-top: -10px; paraštės apačia: 10px; .grid-right grid-area: right; margin-left: 10px; paraštė-dešinė: -10px; margin-top: -10px; paraštės apačia: 10px;
2. Naudojimas transformuoti
The išversti () CSS funkcija elementą palei x ir y ašis. Naudojant jį kartu su transformuoti ypatybė leidžia pakeisti tinklo elemento padėtį.
.tinklo centras grid-area: centre; transformuoti: išversti (-10px, -10px); .grid-right grid-area: right; transformuoti: versti (10px, -10px);
3. Naudojimas poziciją
Naudojant pozicija: santykinis; taisyklė su nurodytu viršuje, apačioje, kairėje, ir teisė ypatybės taip pat gali būti naudojamos judant tinklelio elementams.
.tinklo centras grid-area: centre; pozicija: santykinis; apačioje: 10px; dešinėje: 10px; .grid-right grid-area: right; pozicija: santykinis; apačioje: 10px; kairėje: 10px;
Užsakyti tinklelio elementus
Ekrane rodomi tinklelio elementai tokia tvarka, kokia jie yra HTML šaltinio kode.
Ankstesniame skyriuje, kai centro elementas buvo perkeltas į kairę, naršyklė įdėjo į kairę elementą. Taip atsitiko todėl, kad HTML, Tačiau galime pakeisti užsakymų tinklelio elementus naudojant Naudojant Kaip ir CSS Grid Layout modulyje, elemento tvarką pakeiskite HTML neturi įtakos tinklelio išdėstymui, taip pat galite įdėti Jei tinklo elementui naudojate automatinio dydžio eilutes arba stulpelius (naudodami Atminkite, kad mūsų mėginių tinklelyje visi trys stulpeliai užima vieną frakciją ( Čia keičiame kairiojo elemento dydį naudojant Čia keičiame kairiojo elemento dydį naudojant z-indeksas arba įsakymas CSS savybės.
z-indeksas: 1; taisyklė, kairysis tinklelio elementas gavo didesnį krovimo kontekstą.. grid-left grid area: left; z-indeksas: 1;
Dydžio tinklelio elementai
automatinis, fr, gr vienetai), jis susitrauks, kad užpildytų savo kaimyninį elementą, kuris išaugo tik jeigu minėtas elementas nebuvo pagal dydį transformuoti arba neigiama marža.fr) iš tinklo talpyklos. Pažvelkite, kaip visi trys elementai atrodo panašūs po to, kai kairysis yra pakeistas dviem skirtingais būdais.1. Dydis
plotis ir aukštisplotis ir aukštis savybės. Dėl to jis lieka tinklelio talpyklos viduje.
.grid-left grid area: left; plotis: 200px; aukštis: 90px;
2. Dydis
transformuotitransformuoti nuosavybė. Dėl to jis perpildo konteinerį ir taip pat išnyksta tinklelio tarpas.
.grid-left grid area: left; transformuoti: scalex (1.8);
