Hemsida » Kodning » Flytta objekt i CSS Grid Layout [Guide]

    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:

    1. Det är inställt att spänna över (och över) cellen (erna) till ett annat rutnät.
    2. Dess storlek har ökats, vilket medför att den överlappar med det närliggande nätet.
    3. 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,

    kommer efter
    , Därför är mittpunkten gjord efter (och över) den vänstra.

    Vi kan dock ändra ordernätet använda z-index eller den ordning CSS egenskaper.

    Använda 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;  

    Som i CSS Grid Layout-modulen, ändrar du elementorder i HTML påverkar inte rutnätlayouten, du kan också sätta

    innan
    i HTML. Gör bara det om den uppdaterade HTML-koden inte skadar tillgängligheten.

    Storleksnivån

    Om du använder rader eller kolumner med stor storlek för ett rutnät (med 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.

    Kom ihåg att i alla provkolumnerna tar alla tre kolumner en fraktion (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

    Här ändrar vi storleken på det vänstra objektet använda 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

    Här ändrar vi storleken på det vänstra objektet använda 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);  
    © Savtec
    Användbar information och tips om webbutveckling. Programmering, webbdesign, CSS, HTML, JAVASCRIPT. Konfigurera och installera om WINDOWS. Skapa webbplatser och applikationer från början.