Items verplaatsen in CSS-rasterlay-out [Gids]
De ... gebruiken CSS grid lay-outmodule in webdesign wordt steeds meer haalbaar naarmate meer browsers beginnen ondersteun het. Bij het maken van lay-outs voor het invullen van rastercellen, kan er echter een moment komen waarop u ingewikkeldere dingen wilt bereiken.
U wilt bijvoorbeeld misschien enigszins bewegen sommige rasteritems zitten vast in hun rastergebieden. U wilt misschien ook verplaats ze uit de roostercontainer (overloop), of over elkaar (overlappen), of gewoon ... naar een lege ruimte rondom.
Dus in dit bericht laat ik je zien hoe je het kunt doen verplaatsen, ordenen, overlopen, overlappen en rasteritems op maat maken wanneer u de CSS-rasterlay-outmodule gebruikt.
Maak een CSS-raster
Laten we eerst een eenvoudig CSS-raster maken met één rij en drie kolommen.
In de HTML maken we een aantal divs waar de rastercontainer is bevat de drie rasteritems.
In de CSS, de rastercontainer heeft de weergave: raster; eigendom en de roosteritems hebben roostervormige area die de namen van de rasteritems aangeeft.
Wij ook voeg het toe roostervormige template-gebieden eigendom naar de rastercontainer, waarin de rasternamen worden gebruikt wijs de rastergebieden toe aan de rastercellen die ze vertegenwoordigen.
Alle kolommen neem de grootte van één fractie (fr) van de containerbreedte, zorgen voor de insluiting van de grid items.
.grid-container weergave: grid; grid-sjabloon-gebieden: 'left center right'; rooster-sjabloon-kolommen: herhaling (3, 1fr); rooster-sjabloon-rijen: 80px; grid-gap: 5px; breedte: 360 px; achtergrondkleur: magenta; . grid-left grid-area: left; . grid-center grid-area: center; .grid-right grid-area: right; .grid-container div background-color: lightgreen;
Overloop rooster items
U kunt een rasteritem maken overloop zijn roostercontainer als het nodig is voor een lay-out. Om het overloopeffect te bereiken, moet je gewoon gebruik een andere kolomgrootte:
.grid-container weergave: grid; grid-sjabloon-gebieden: 'left center right'; rooster-sjabloon-kolommen: herhaling (3, 150px); grid-gap: 5px;
De som van de kolom- en gap-grootte is groter dan de breedte van de container, waardoor de rasteritems hun container overlopen.
Overlap roosteritems
EEN rasteritem kan overlappen (volledig of gedeeltelijk bedekken) een ander rasteritem in de volgende gevallen:
- Het is ingesteld om de cel (len) van een ander rasteronderdeel over (en over) te leggen.
- De grootte ervan is verhoogd, waardoor deze overlapt met het nabije rasteritem.
- Het wordt verplaatst bovenop een ander rasteritem.
We bespreken de tweede en derde zaak later in de “Sizing” en “In beweging” secties.
Laten we eerst het eerste geval bekijken bij een rasteritem overspant over een andere.
Het rasteritem in het midden heeft overspannen over de linker, dus slechts twee items zijn zichtbaar op het scherm.
.grid-center grid-area: center; rasterkolom: 1/3;
De roostervormige kolom en roostervormige rij eigenschappen rasterlijnen toewijzen waartussen een kolom of rij moet passen.
Op het onderstaande diagram kunt u zien hoe het rasterkolom: 1/3 CSS-regel werkt: de middelste kolom overspant tussen de rasterlijnen 1 en 3. Als gevolg overlapt de middelste kolom de linker kolom.
Rasteritems verplaatsen
Door te bewegen, bedoel ik de items enigszins verplaatsen. Als u een item volledig in een andere rastercel / gebied wilt verplaatsen, raad ik u aan de code voor het maken van het raster bij te werken.
Het verplaatsen van rasteritems is eenvoudig. Net gebruik de marge, de transformeren, of de position: relative; eigenschappen. Zie hieronder hoe de items worden verplaatst met behulp van die eigenschappen.
De middelste en rechter rasteritems kunnen op de volgende manieren worden verplaatst (zoals hierboven weergegeven):
1. Gebruiken van marge
Negatieve marges verhogen de afmetingen van rasteritems, terwijl positieve marges deze inkorten. Door een combinatie van beide te gebruiken, kunt u de rasteritems enigszins verplaatsen.
.grid-center grid-area: center; marge links: -10px; margin-right: 10px; margin-top: -10px; margin-bottom: 10px; .grid-right grid-area: right; marge links: 10 px; margin-right: -10px; margin-top: -10px; margin-bottom: 10px;
2. Gebruik transformeren
De vertalen() CSS-functie verplaatst een element langs de x- en y-assen. Gebruik het samen met de transformeren Met eigenschap kunt u de positie van een rasteritem wijzigen.
.grid-center grid-area: center; transform: translate (-10px, -10px); .grid-right grid-area: right; transform: translate (10px, -10px);
3. Gebruik positie
De ... gebruiken positie: relatief; regel met het opgegeven top, bodem, links, en rechts eigenschappen kunnen ook worden gebruikt voor het verplaatsen van rasteritems.
.grid-center grid-area: center; positie: relatief; onder: 10px; rechts: 10px; .grid-right grid-area: right; positie: relatief; onder: 10px; links: 10px;
Rasteritems bestellen
Rasteritems worden op het scherm weergegeven in de volgorde waarin ze in de HTML-broncode voorkomen.
In het vorige gedeelte, toen het middelste item naar links werd verplaatst, werd het door de browser bovenop het linkse item geplaatst. Dit gebeurde omdat in de HTML, Dat kunnen we echter wel verander de volgorde rooster items de ... gebruiken De ... gebruiken Net als in de CSS Grid Layout-module, verander je de elementvolgorde in HTML heeft geen invloed op de lay-out van het raster, je kunt ook zetten Als u rijen of kolommen met automatische grootte gebruikt voor een rasteritem (met Onthoud dat in ons voorbeeldraster alle drie kolommen één breuk bevatten ( Hier veranderen we de grootte van het linker item de ... gebruiken Hier veranderen we de grootte van het linker item de ... gebruiken z-index of de bestellen CSS-eigenschappen.
z-index: 1; regel, het linker roosteritem heeft een hogere stapelcontext.. grid-left grid-area: left; z-index: 1;
Size grid items
auto, fr, gr eenheden), zal het krimpen om ruimte te maken voor het naburige item dat in omvang is gegroeid alleen als zei item was niet bemeten door transformeren of een negatieve marge.fr) van de netcontainer. Bekijk hoe alle drie de items eruitzien nadat de linkerzijde op twee verschillende manieren is verkleind.1. Gerangschikt met
breedte en hoogtebreedte en hoogte eigenschappen. Als gevolg hiervan blijft het in de roostercontainer.
.grid-left grid-area: left; breedte: 200 px; hoogte: 90 px;
2. Opgemaakt met
transformerentransformeren eigendom. Als gevolg hiervan loopt de container over en verdwijnt ook de roosteropening.
.grid-left grid-area: left; transformatie: scalex (1,8);
