Jugant amb CSS Grid — grid-gap
Css temporada 1 capítol 2
Aquest és el segón article d’una sèrie d’articles dedicats al CSS
El Gap permet definir l’espai buit entre els elements del grid. Aquí és on CSS Grid comença a distanciar-se de Flexbox, ja que el segon no permet definir l’espai entre columnes i sempre és dinàmic o nul.
Les propietats que ens permeten definir el gap son les següents:
grid-column-gap: 10px; // Espai entre columnes
grid-row-gap: 15px; // Espai entre files
grid-galp: 15px 10px; // Espai entre files i espai entre columnes
grid-galp: 10px; // Espai entre files i columnes
Jo he decidit no definir-ho i deixar un espai de zero, així les columnes es presenten enganxades per defecte.
Després creo uns modificadors de l’estil .c-grid--{SIZE}-gap
per poder afegir diferents mides de gap del nostre grid i que ens serveixi per la majoria de projectes, i ho faig de forma senzilla definint el mateix espai entre línies i columnes utilitzant només grid-gap:
.c-grid--tiny-gap {
grid-gap: 0.5rem;
}
.c-grid--small-gap {
grid-gap: 1rem;
}
.c-grid--medium-gap {
grid-gap: 2rem;
}
.c-grid--large-gap {
grid-gap: 3rem;
}
.c-grid--huge-gap {
grid-gap: 4rem;
}
Recordem que les unitats rem són unitats escalables, que el navegador tradueix a pixels en funció de la mida de font aplicada a la base del document.
Ara tenim 5 modificadors del component .c-grid
, que varien la mida de l’espai buit entre elements:
.c-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
}<section class="c-grid c-grid--huge-gap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
En el proper article veurem com aconseguir que una caixa ocupi varies columnes i farem modificadors per forçar el número de columnes màxim per fila.