Flytta objekt i CSS Grid Layout [Guide]
Använda CSS Grid Layout Module i webbdesign blir allt mer genomförbart när fler webbläsare börjar stödja det. När du skapar layouter som fyller i nätceller kan det komma ett ögonblick när du vill uppnå mer komplicerade saker.
Till exempel kanske du vill rör dig lite Några av rutnätet sitter fast i sina rutnät. Du kanske också vill flytta dem ur gallret behållaren (överflöde), eller över varandra (överlappning), eller bara ... till något tomt utrymme runt.
Så i det här inlägget ska jag visa dig hur du kan flytta, beställa, överfalla, överlappa och storleken på rutnätet när du använder CSS Grid Layout Module.
Skapa ett CSS-nät
Låt oss först skapa ett enkelt CSS-nät med en rad och tre kolumner.
I HTML skapar vi en massa divs där rutnätet innehåller de tre rutnätet.
I CSS, nätet behållaren har display: rutnät;
fast egendom och rutnätet ha grid-område
som identifierar namnen på rutnätområdena.
Vi också Lägg till grid-template-områden
fast egendom till rutnätet, där nätnamnens namn används Tilldela gridområdena till de nätceller de representerar.
Alla kolumner ta storleken på en fraktion (fr
) av behållarens bredd, vilket säkerställer att gridobjekten innesluts.
.gitterbehållare display: rutnät; galler-mall-områden: "vänster centrum höger"; rutnätmall-kolumner: upprepa (3, 1fr); raster-mall-rader: 80px; gallergap: 5px; bredd: 360px; bakgrundsfärg: magenta; .grid-left grid-area: left; .grid-center grid-area: center; .grid-right grid-area: right; .grid-container div bakgrundsfärg: ljusgrön;
Överflödessnittsartiklar
Du kan skapa ett rutnät översvämma dess gallerbehållare om det är nödvändigt för en layout. För att uppnå överflödeseffekten behöver du bara använd en annan kolumnstorlek:
.gitterbehållare display: rutnät; galler-mall-områden: "vänster centrum höger"; rutnätmall-kolumner: upprepa (3, 150px); gallergap: 5px;
De summan av kolumn- och mellanrummets storlek är större än behållarens bredd, vilket orsakar att rutens föremål överflödar behållaren.
Överlappa rutnät
en rutnätet kan överlappa varandra (helt eller delvis täckt) ett annat rutnät i följande fall:
- Det är inställt att spänna över (och över) cellen (erna) till ett annat rutnät.
- Dess storlek har ökats, vilket medför att den överlappar med det närliggande nätet.
- Den flyttas över på ett annat objekt på nätet.
Vi diskuterar det andra och tredje fallet senare, i “dimensionering” och “Rör på sig” sektioner.
Låt oss först se det första fallet när ett rutnät spänner över en annan.
Rutnätet i mitten har sträckte sig över vänster, så det är bara två saker som syns på skärmen.
.rutnät grid-area: center; rutnät-kolumn: 1/3;
De grid-kolonn
och grid-rad
egenskaper Tilldela nätlinjer mellan vilka en kolumn eller rad behöver passa.
På nedanstående diagram kan du se hur rutnät-kolumn: 1/3
CSS-regel fungerar: mittkolumnen sträcker sig mellan nätledningarna 1 och 3. Som ett resultat överlappar mittkolonnen den vänstra.
Flytta rutnät
Genom att flytta menar jag flytta objekten något runt. Om du helt vill flytta ett objekt till ett annat rutnät / område rekommenderar jag att du uppdaterar rutnätskoden.
Att flytta runt rutnät är enkelt. Bara Använd marginal
, de omvandla
, eller den positioner: relativ;
egenskaper. Se nedan hur objekten flyttas med de här egenskaperna.
Centrum och rätt rutnät kan flyttas (enligt ovan) på följande sätt:
1. Användning marginal
Negativa marginaler ökar dimensionerna på rutnät, medan positiva marginaler trimmer dem. Genom att använda en kombination av båda kan du slidigt flytta rutnätet runt.
.rutnät grid-area: center; marginal-vänster: -10px; marginal-höger: 10px; marginal-topp: -10px; marginal-botten: 10px; .grid-right grid-area: right; marginal-vänster: 10px; marginal-höger: -10px; marginal-topp: -10px; marginal-botten: 10px;
2. Användning omvandla
De Översätt()
CSS-funktionen rör ett element längs x- och y-axlarna. Använda den tillsammans med omvandla
egenskapen låter dig ändra positionen för ett rutnät.
.rutnät grid-area: center; transformera: translate (-10px, -10px); .grid-right grid-area: right; transformera: translate (10px, -10px);
3. Användning placera
Använda position: relativ;
reglera med det angivna topp
, botten
, vänster
, och höger
egenskaper kan också användas för att flytta runt rutnät också.
.rutnät grid-area: center; position: relativ; botten: 10px; höger: 10px; .grid-right grid-area: right; position: relativ; botten: 10px; vänster: 10px;
Beställa rutnät
Rutnätet görs på skärmen i den ordning de visas i HTML-källkoden.
I föregående avsnitt, när mittpunkten flyttades till vänster placerades den överst på vänster objekt av webbläsaren. Detta hände på grund av att det finns HTML, Vi kan dock ändra ordernätet använda Använda Som i CSS Grid Layout-modulen, ändrar du elementorder i HTML påverkar inte rutnätlayouten, du kan också sätta Om du använder rader eller kolumner med stor storlek för ett rutnät (med Kom ihåg att i alla provkolumnerna tar alla tre kolumner en fraktion ( Här ändrar vi storleken på det vänstra objektet använda Här ändrar vi storleken på det vänstra objektet använda z-index
eller den ordning
CSS egenskaper.z-index: 1;
reglera det vänstra rutnätet har ett högre staplingskontext.. rutnät-vänster rutnätområde: vänster; z-index: 1;
Storleksnivån
bil
, fr
, gr
enheter) kommer det att krympa för att skapa utrymme för det angränsande objektet som har vuxit i storlek bara om nämnda föremål var inte storlek av omvandla
eller en negativ marginal.fr
) på gallret behållaren. Ta en titt på hur alla tre objekten ser ut efter att den vänstra storleken har ändrats på två olika sätt.1. Storleksanpassad med
bredd
och höjd
bredd
och höjd
egenskaper. Som ett resultat blir den kvar i gallerbehållaren. .rutnät-vänster rutnätområde: vänster; bredd: 200px; höjd: 90px;
2. Storleksanpassad med
omvandla
omvandla
fast egendom. Som ett resultat överflödar den behållaren och gallergapet försvinner också. .rutnät-vänster rutnätområde: vänster; transformera: skalax (1,8);