Vienumu pārvietošana CSS režģa izkārtojumā [Guide]
Izmantojot CSS režģa izkārtojuma modulis web dizains kļūst arvien vairāk realizējams, jo sāk vairāk pārlūkprogrammu atbalstīt to. Veidojot izkārtojumus, kas aizpilda režģa šūnas, var rasties brīdis, kad vēlaties sasniegt sarežģītākas lietas.
Piemēram, jūs varētu vēlēties nedaudz pārvietoties daži režģa elementi ir iestrēguši to tīkla zonās. Jūs arī varētu vēlēties pārvietojiet tos no režģa konteinera (pārplūde) vai pār otru (pārklājas) vai vienkārši… uz kādu tukšu vietu apkārt.
Tātad šajā amatā es jums parādīšu, kā jūs varat pārvietot, pasūtīt, pārplūst, pārklāties un izmēra režģa vienumus izmantojot CSS režģa izkārtojuma moduli.
Izveidojiet CSS režģi
Pirmkārt, izveidosim vienkāršu CSS režģi ar viena rinda un trīs kolonnas.
HTML, mēs izveidojam ķekars divs, kur režģa konteiners satur trīs tīkla elementus.
CSS tīklā tvertne ir displejs: režģis; īpašums un tīkla vienumus ir režģa zona kas norāda tīkla elementu apgabalu nosaukumus.
Mēs arī pievienojiet režģa veidnes īpašums uz režģa konteinera, kurā pieraduši tīkla laukuma nosaukumi piešķiriet režģa zonas tiem tīklā esošajiem elementiem.
Visas slejas ņem vienu frakciju (fr) no tvertnes platuma, nodrošinot tīkla elementu ierobežošanu.
.režģa konteiners displejs: režģis; režģa veidnes: “kreisais centrs labajā pusē”; grid-template-columns: atkārtot (3, 1fr); režģa-veidnes rindas: 80px; režģa sprauga: 5px; platums: 360px; fona krāsa: magenta; .grid-left režģa laukums: pa kreisi; .grid-center grid-area: centre; .grid-right režģa zona: pa labi; .grid-container div fona krāsa: gaišs;
Pārplūdes režģa vienumi
Jūs varat izveidot režģa vienumu pārplūdes režģa tvertne ja tas ir nepieciešams izkārtojumam. Lai sasniegtu pārplūdes efektu, jums ir nepieciešams izmantot citu kolonnas lielumu:
.režģa konteiners displejs: režģis; režģa veidnes: “kreisais centrs labajā pusē”; grid-template-columns: atkārtot (3, 150px); režģa sprauga: 5px;
The kolonnas un atstarpes lieluma summa ir lielāks par tvertnes platums, kas izraisa režģa elementu pārplūdi.
Pārklājiet tīkla vienumus
A tīkla vienums var pārklāties (pilnībā vai daļēji) citu tīkla elementu šādos gadījumos:
- Tas ir iestatīts tā, lai tas aptvertu citu tīkla elementu šūnas (-es).
- Tā lielums ir palielināts, izraisot pārklāšanos ar tuvējo tīkla elementu.
- Tas ir pārvietots virs cita tīkla elementa.
Otro un trešo gadījumu mēs vēlāk apspriedīsim “Izmēri” un “Pārvietošanās” sadaļās.
Pirmkārt, aplūkosim pirmo gadījumu, kad tīkla vienums aptver citu.
Tīkla vienība centrā ir pāri kreisajam, tāpēc ekrānā ir redzami tikai divi vienumi.
.tīkla centrs grid-area: centre; režģa kolonna: 1/3;
The režģa kolonna un režģa rinda īpašības piešķirt režģa līnijas starp kuriem kolonnai vai rindai ir jāatbilst.
Tālāk redzamajā diagrammā var redzēt, kā režģa kolonna: 1/3 CSS noteikums darbojas: centrālā kolonna starp tīkla līnijām 1 un 3. Tā rezultātā vidējā sleja pārklājas ar kreiso.
Pārvietojiet režģa vienumus
Pārvietojoties, es domāju pārvietojot preces nedaudz apkārt. Ja jūs pilnīgi vēlaties pārvietot objektu citā tīkla šūnā / apgabalā, iesakām atjaunināt režģa izveides kodu.
Pārvietošanās no tīkla elementiem ir vienkārša. Tikai izmantot starpību, the pārveidot, vai pozīcija: relatīvais; īpašības. Skatiet tālāk, kā preces tiek pārvietotas, izmantojot šīs īpašības.
Centru un labo režģa vienumus var pārvietot (kā parādīts iepriekš) šādos veidos:
1. Lietošana starpību
Negatīvās starpības palielina tīkla elementu izmērus, bet pozitīvās starpības tās samazina. Izmantojot abu kombināciju, jūs varat pārvietot režģa vienumus apkārt.
.tīkla centrs grid-area: centre; margin-left: -10px; labās malas: 10px; margin-top: -10px; margas apakšā: 10px; .grid-right režģa zona: pa labi; margas pa kreisi: 10px; labās malas: -10px; margin-top: -10px; margas apakšā: 10px;
2. Lietošana pārveidot
The tulkot () CSS funkcija pārvieto elementu gar x- un y-asīm. Izmantojot to kopā ar pārveidot īpašums ļauj mainīt tīkla elementa pozīciju.
.tīkla centrs grid-area: centre; pārveidot: tulkot (-10px, -10px); .grid-right režģa zona: pa labi; pārveidot: tulkot (10px, -10px);
3. Lietošana pozīciju
Izmantojot pozīcija: relatīvais; noteikums ar norādīto tops, apakšā, pa kreisi, un pa labi īpašības var izmantot arī, lai pārvietotos pa režģa vienībām.
.tīkla centrs grid-area: centre; pozīcija: relatīvais; apakšā: 10px; labi: 10px; .grid-right režģa zona: pa labi; pozīcija: relatīvais; apakšā: 10px; pa kreisi: 10px;
Pasūtīt režģa vienumus
Režģis tiek attēlots ekrānā secībā, kādā tie parādās HTML pirmkodā.
Iepriekšējā sadaļā, kad centrālais vienums tika pārvietots pa kreisi, pārlūkprogramma to novietoja kreisajā pusē. Tas notika tāpēc, ka HTML, Tomēr mēs varam mainīt pasūtījuma režģa vienumus izmantojot Izmantojot Tāpat kā CSS režģa izkārtojuma modulī, mainot elementa secību HTML neietekmē režģa izkārtojumu, jūs varat arī likt Ja tīkla vienumam izmantojat automātiskas izmēra rindas vai kolonnas (izmantojot Atcerieties, ka mūsu paraugu tīklā visi trīs kolonnas aizņem vienu daļu ( Šeit mēs mainām kreisā vienuma lielumu izmantojot Šeit mēs mainām kreisā vienuma lielumu izmantojot z-indekss vai kārtībā CSS īpašības.
z-indekss: 1; noteikums, kreisais režģa vienums ieguva augstāku kraušanas kontekstu.. grid-left režģis: pa kreisi; z-indekss: 1;
Lieluma režģa vienumi
auto, fr, gr vienības), tas samazinās, lai padarītu vietu kaimiņiem, kas ir palielinājušies tikai ja minētais punkts nav izmēra pēc pārveidot vai negatīva starpība.fr) no režģa konteinera. Apskatiet, kā visi trīs priekšmeti izskatās pēc tam, kad kreisais ir mainīts divos dažādos veidos.1. Izmērs ar
platums un augstumsplatums un augstums īpašības. Tā rezultātā tā paliek režģa tvertnē.
.grid-left režģis: pa kreisi; platums: 200px; augstums: 90px;
2. Izmērs ar
pārveidotpārveidot īpašums. Tā rezultātā tas pārplūst konteineru un izzūd arī režģa plaisa.
.grid-left režģis: pa kreisi; transformācija: scalex (1.8);
