Accentsconagua
Share
In een van onze eerdere introductiehandleidingen voor CSS Grid hebben we gekeken naar vloeiende kolommen en betere dakgoten. We hebben geleerd dat het niet nodig is om precies aan te geven waar we onze rasteritems willen positioneren; als we de eigenschappen van ons raster declareren, plaatst Grid onze items volgens hun algoritme voor automatische plaatsing.
In deze tutorial bekijken we hoe dat algoritme zijn werk doet en hoe we het kunnen beïnvloeden.
Als uw browser niet is ingesteld om Grid te ondersteunen, moet u dat uitzoeken om het te volgen. Lees dit:
Hier is een demo-raster om dingen uit te schakelen; het is een container die we hebben verklaard te zijn weergave: raster; en bevat achttien onderliggende elementen. We hebben aangegeven dat het vijf kolommen moet hebben, elk van gelijke breedte, minstens hetzelfde aantal rijen, en een smalle rugmarge rondom 2px.
rooster-sjabloon-kolommen: herhaling (5, 1fr); grid-template-rows: repeat (5, 1fr); grid-gap: 2px;
Tot nu toe goed, en je kunt zien dat Grid onze achttien items heeft genomen en ze naar binnen heeft geduwd, vanuit de linkerbovenhoek werkte, naar rechts reed en vervolgens rij voor rij naar beneden ging. Dit gedrag lijkt veel op de manier waarop drijvers werken.
Notitie: het gedrag van links naar rechts zou worden omgekeerd als we te maken hadden met een richting: RTL; lay-out.
Dat is allemaal leuk en netjes, maar laten we eens kijken wat er gebeurt als onze items niet zo perfect passen. Naar .post-7 we voegen enkele regels toe om het groter te maken door twee kolommen en twee rijen om te leggen:
.item-7 background: # e03f3f; rasterkolom: span 2; grid-row: span 2;
Hoe ziet dat er nu uit?
Niet slecht! .post-7 vult meer ruimte op, dus .post-8 en .post-9 zijn verder gepositioneerd. .post-10 kijkt vervolgens of er een lege ruimte naast is .post-9, en wanneer het ziet dat het niet beweegt, beweegt het naar beneden een rij en begint helemaal links. De andere items blijven op dezelfde manier instoppen.
Maar wacht, wat als we het ook doen .post-9 een beetje overgewicht?
Nu wordt het interessant; .post-9 past niet langer in de kolom aan het einde, dus wordt het naar de volgende rij gedrukt. Omdat het nergens in past .post-7 het blijft zitten. .post-10, je zou je kunnen voorstellen, zou zichzelf erin stoppen .post-6 Nogmaals, maar als je het onthoudt, zoekt het naar een vacante kolom en faalt dan dat het beweegt in een rij en shunts opnieuw naar links. Dit is een belangrijk concept om te begrijpen.
Als je naar de vorige demo kijkt, zie je dat .post-18, bij het niet vinden van ruimte naast .post-17, is een rij naar beneden gegaan. We hebben eigenlijk maar vijf rijen gedefinieerd, maar Grid heeft aangenomen dat we nog een rij willen overstag gaan. Dit komt door raster-auto-flow, die bij het rasterelement hoort en waarvan de standaardwaarde is rij. We kunnen deze waarde wijzigen in kolom als we willen, wat de manier waarop ons raster eruitziet totaal zou veranderen:
Dit ziet eruit soort van vergelijkbaar, maar je zult zien dat onze items in de linkerbovenhoek zijn gesleufd, vervolgens naar beneden zijn gegaan om elke rij te vullen, vervolgens naar de tweede kolom gaan enzovoort. Dus nu, wanneer een item te groot is voor zijn laarzen, zoekt het volgende item naar de volgende lege rijruimte, dan faalt dat naar de volgende kolom.
We kunnen nog een sleutelwoord aan onze toevoegen raster-auto-flow eigendom, en het is mogelijk mijn favoriete CSS-sleutelwoord tot nu toe: dicht. De standaard tegenhanger is dun (mijn tweede favoriet). Laten we het volgende doen:
grid-auto-flow: rij dicht;
Notitie: we hoeven dit niet te vermelden rij hier is het geïmpliceerd, maar dit laat zien hoe de syntaxis werkt.
Nu onze vriend .post-10, bij het vinden dat er geen ruimte naast is .post-9, controleert eerst wat er is bovenstaande voordat u naar een andere rij gaat.
Dankzij deze wijziging in het plaatsingsalgoritme zijn onze artikelen nu dicht opeengepakt, wat ons een efficiënter gevuld raster oplevert. Dit betekent echter dat de visuele lay-out niet noodzakelijkerwijs de volgorde van de documentbronnen weerspiegelt, wat niet altijd nuttig is voor de gebruiker.
Laten we samenvatten:
raster-auto-flow van rij naar kolom.raster-auto-flow accepteert een sleutelwoord om de "packing" -benadering te beschrijven. Standaard is deze waarde dun, maar we kunnen dit veranderen dicht die probeert alle beschikbare hiaten op te vullen.