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

1. Introducció
2. Gap
3. Start/end
4. Responsive
5. Àrees
6. Alineació

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.