Tijdens werkzaamheden was ik bezig met het toevoegen van een partner lijst aan DevNL. Oorspronkelijk maakte ik hiervoor gebruik van flex-box mogelijkheid binnen CSS (waar ik erg fan van ben). Ik deelde de lijst in 4 kolommen en voegde de items toe.
Wel/geen flexbox gebruiken
Al snel kwam ik er achter dat flex-box wellicht niet de juiste oplossing was wanneer je oneven aantal elementen hebt. De justify-content van de lijst stond ingesteld als space-between, wat inhoud dat alle elementen een tussen elkaar automatisch ruimte krijgen en los van elkaar staan (mits de items niet een volledige breedte hebben).
Flexbox biedt helaas geen automatische opvulling aan voor eventuele kolommen, dit komt er in de praktijk op neer dat je óf een leeg element moet toevoegen, óf er genoegen aan doen dat het er op de volgende manier uit komt te zien:
CSS Grid
Gelukkig bestaat er display: grid;, deze functionaliteit werd in 2017 (een aantal jaar na flex-box) geïntroduceerd en heeft een global browser-dekking van 94,32% anno 2021. Het grote verschil ten opzichte van ``flex-box` is dat de 'grid' daadwerkelijk als een grid met kolommen wordt ingedeeld.
In mijn geval moest de grid aan de volgende voorwaarden voldoen:
- Op mobiel moet er maar één kolom zijn
- Op breedere schermen moeten er variaties van 2 tot 4 kolommen zijn
- De grid moet ook bij een oneven aantal items er goed uit zien
De uitwerking
Aangezien het in principe om een lijst van items gaat, heb ik ervoor gekozen om gebruik te maken van de <ul> lijst element met de <li> elementen die zullen fungeren als kolommen.
<ul class="grid">
<li>Kolom 1</li>
<li>Kolom 2</li>
<li>Kolom 3</li>
<li>Kolom 4</li>
<li>Kolom 5</li>
<li>Kolom 6</li>
<li>Kolom 7</li>
</ul>
Alle browsers geven standaard de <ul> een margin en padding als opmaak. Daarom is het belangrijk om in ieder geval de volgende properties te geven die de lijst styling 'reset' zodat er geen gekke stijling ontstaat wanneer de grid werkt. Ook willen we dat er ruimte vertikaal ontstaat zodat de kolommen niet aan elkaar plakken. Hiervoor voegen we een margin-bottom: 10px toe aan elke <li>.
.grid {
margin: 0;
padding: 0;
list-style-type: none;
}
.grid li {
margin-bottom: 10px;
}
Wanneer je de bovenstaande code uittest, zullen alle items onder elkaar staan, ook op grote schermen. Dat komt omdat we op veel mobiele devices in de meeste gevallen niet willen dat de lijst een grid is. Daarom defineren we de grid pas vanaf een hogere schermresolutie, daarvoor gebruiken we CSS @media queries die kijken naar de schermbreedte van de gebruiker.
In dit geval nemen we een schermbreedte van 500px als voorbeeld. Vanaf dit punt willen we dat de grid zal gaan werken en er 2 rijen ontstaan. Daarvoor voegen we de display: grid; toe en gebruiken we de justify-content: space-between; om ervoor te zorgen dat de kolommen ruimte tussen elkaar krijgen.
Daarnaast voegen we een grid-template-columns toe die ervoor zorgt dat de kolommen en rijen ontstaan. Wanneer we dit niet zouden doen, zouden alle kolommen een rij worden en ontstaat er geen grid effect. De inhoud van deze CSS property is repeat(auto-fill, calc(100% / 2 - 10px)).
De auto-fill zorgt ervoor dat wanneer je oneven aantal rijen hebt, de grid deze automatisch invult voor je. Zo blijven je kolommen strak onder elkaar staan. De tweede property die je toevoegt aan de repeat functie, is calc(100% / 2 - 10px). De calc zorgt ervoor dat je realtime in de browser een berekeningen kan doen, in dit geval gebruiken we het om de breedte te berekenen. We willen 2 kolommen weergeven met een tussenruimte van 10px tussen elke kolom. De berekening wordt dan 100% van de breedte, delen door twee, min 10 pixels tussenruimte.
Wanneer een scherm breder is dan 500px, willen we meer kolommen, daarom gaan we de grid-template-columns property overschrijven en gaan we in plaats van de berekening 100% / 2 - 10px, de volgende berekening gebruiken: 100% / 3 - 10px. Dit doen we hetzelfde voor schermen boven de 1400px, alleen dan voor vier kolommen.
/* Gridrijen vanaf 500px brede schermen */
@media screen and (min-width: 500px) {
.grid {
display: grid;
grid-gap: 0;
justify-content: space-between;
grid-template-columns: repeat(auto-fill, calc(100% / 2 - 10px));
}
}
/* Drie kolommen vanaf 1000px brede schermen */
@media screen and (min-width: 1000px) {
.grid {
grid-template-columns: repeat(auto-fill, calc(100% / 3 - 10px));
}
}
/* Vier kolommen vanaf 1400px brede schermen */
@media screen and (min-width: 1400px) {
.grid {
grid-template-columns: repeat(auto-fill, calc(100% / 4 - 10px));
}
}
Resultaat
Uiteindelijk wanneer je de bovenstaande code gebruikt zal er een responsive grid ontstaan die in elke moderne browser zonder problemen werkt.
In het geval van DevNL komt het er op de volgende manier uit te zien, inclusief de 10px tussenruimte voor elke kolom. De space-between zorgt ervoor dat de kolommen mooi uit elkaar worden gehouden en deze de 10px tussenruimte daadwerkelijk krijgen.
Volledige CSS code:
.grid {
margin: 0;
padding: 0;
list-style-type: none;
}
.grid li {
margin-bottom: 10px;
}
/* Gridrijen vanaf 500px brede schermen */
@media screen and (min-width: 500px) {
.grid {
display: grid;
grid-gap: 0;
justify-content: space-between;
grid-template-columns: repeat(auto-fill, calc(100% / 2 - 10px));
}
}
/* Drie kolommen vanaf 1000px brede schermen */
@media screen and (min-width: 1000px) {
.grid {
grid-template-columns: repeat(auto-fill, calc(100% / 3 - 10px));
}
}
/* Vier kolommen vanaf 1400px brede schermen */
@media screen and (min-width: 1400px) {
.grid {
grid-template-columns: repeat(auto-fill, calc(100% / 4 - 10px));
}
}
