Share
Het is goed mogelijk om CSS-positionering op rasteritems te gebruiken, net als met de meeste andere elementen. Er zijn echter een paar eigenaardigheden, dus laten we even kijken om te zorgen dat u de valkuilen vermijdt.
Laten we beginnen met een eenvoudig raster met negen items, ingedeeld in drie kolommen. Elke kolom is 1fr breed, behalve de derde kolom die (dankzij MinMax ()) krimpt niet kleiner dan 160 px:
rooster-sjabloon-kolommen: 1fr 1fr minmax (160px, 1fr);
Door een paar regels aan een van de items toe te voegen, kunnen we deze relatief positioneren:
.item-2 positie: relatief; rechts: 100px; top: 30px;
Dus zoals we zouden verwachten, verklaren we dat post-2 moet relatief worden gepositioneerd en vervolgens een aantal offset-eigenschappen definiëren (gebruik de fr-eenheid hier echter niet, maar het werkt niet).
Je zult opmerken, als je het formaat van het venster aanpast, dat het roosteritem zich blijft gedragen (van formaat veranderen) precies zoals het was voordat we het opnieuw positioneerden, en het is nog steeds, zelfzuchtig, zijn plaats in het rooster te reserveren voor het geval het lijkt alsof hij terugkomt.
Dus wat gebeurt er als we Absoluut plaats dat item? Ten eerste positioneert het zich tegen zijn naaste voorouder die een opgegeven positiewaarde heeft. Als u niet instelt positie: relatief; (bijvoorbeeld) in de rastercontainer, zal het griditem de grenzen van het raster verlaten op zoek naar iets anders om aan vast te houden, zoals het html-element.
Je ziet in de demo hierboven dat het item nu absoluut 100px vanaf de linkerkant en 30px vanaf de bovenkant van de gridcontainer gepositioneerd is. Het is effectief uit de documentstroom verwijderd, zoals normaal is met absoluut gepositioneerde elementen. Het slot in het raster is opgevuld door punt-3 en de andere items hebben zichzelf geplaatst om de resterende gaten op te vullen.
Notitie: als onze rastercontainer opvulling zou krijgen, zou de positionering in verhouding staan tot die buitenste paddinggrenzen.
Je zult ook zien dat het niet langer de afmetingen heeft die het gebruikte toen het deel uitmaakte van het raster. Het is gekrompen tot de inhoud. Het raster heeft geen invloed op de dimensionering van het element en het element heeft op geen enkele manier invloed op de dimensionering van het raster.
Het kan even wennen zijn, maar naast de normale verschuivingen kunt u een rasteronderdeel ook positioneren met behulp van de eigenschappen voor rastervorming. Laten we bijvoorbeeld onze plaatsen post-2 absoluut aan rastergebied: 3/2; (met andere woorden, beginnend op de derde rij regel omlaag en de tweede kolomlijn tegenover).
Het ziet er vreemd uit, maar je kunt zien dat het item, nog steeds niet beïnvloed door de grootte van het raster en nog steeds buiten de flow, zich grof op de top van post-9. Het is alsof het een geheel eigen raster heeft, bovenop het origineel.
Notitie: met de z-index kunt u de stapelvolgorde van de items wijzigen, als u dat wilt.
Als we verder gaan, voegen we een offset toe aan de mix (top: 50px; bijvoorbeeld) zal ons item die offset toepassen, terwijl het trouw blijft aan zijn eigen denkbeeldige plaatsing van het raster:
In onze vorige tutorial hebben we gesproken over hoe Grid zal creëren stilzwijgend tracks als ze nodig zijn; nummers die we expliciet definiëren. We kunnen items op die impliciete rastersporen plaatsen als ze bestaan, maar Grid niet creëren die sporen voor elementen buiten de stroom.
In de onderstaande demo hebben we gepositioneerd post-2 op rastergebied: 2/4; maar dit is alleen mogelijk omdat post-6, die nog steeds in de flow zit, heeft Grid al gevraagd om die extra tracks voor ons te maken.
Waarom zou je positionering met Grid nodig hebben? In eerste instantie lijkt het misschien overdreven. Maar als je kijkt naar gebroken rasterlay-outs en verder gaat dan de eenvoudige "over en neer" webpagina's waaraan we gewend zijn geraakt, denk ik dat je positionering behoorlijk nuttig zult vinden.
Accentsconagua