Jugant amb CSS — Introducció a CSS Grid
CSS temporada 1 capítol 1
El el seu dia vaig flipar bastant al descobrir Flexbox. Per desgràcia pocs navegadors el suportaven en aquell moment, i no va ser fins bastant més tard que a Calidae vam començar a fer-lo servir de forma habitual.
Ara li toca al torn a display: grid, anomenat CSS Grid, i aquesta vegada espero que no triguem tant a posar-ho en pràctica. Tot i que en realitat el grid va aparèixer el 2015, és normal que passi un temps abans els navegadors més habituals no adopten el nou codi (Ejem! iExplorer 😡). En aquest cas, com que va ser Microsoft qui va proposar el CSS Grid, a dia d’avui ja funciona bastant bé en tots els navegadors, i per tant no tenim excusa. O això diu Caniuse.
Aquesta primera temporada de CSS tindrà 6 capítols, on parlarem de:
- Introducció
- Gap
- Start/end
- Responsive
- Àrees
- Alineació
De què serveix un Grid?
Crec que ja ho sabeu, però us ho explico igualment 😜
Serveix per construir “reixes” o “quadrícules” on hi posicionem diferents elements de la UI, semblant al que es fa amb bootstrap, ui-kit, materializeCSS i tants altres frameworks.
La diferència radica en la manera de fer-ho, i les possibilitats que aquesta propietat aporta. Ja us avanço ara que no les veurem totes avui: Si Flexbox semblava complicat al principi, CSS Grid(de moment) encara ho sembla més.
Per on comencem?
Ho fem a partir d’un tros de codi d’una sola classe, i que ja us servirà per crear un grid molt bàsic. L’anomenaré .c-grid per construir un component (pensant en BEM i en namespaces):
.c-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
}Anem per parts:
display: grid
La primera propietat que hi trobem és el motiu d’aquest article, per tant no cal explicar-ho, oi?
grid-template-columns: repeat(auto-fit, minmax(44px, 1fr))
Aquí ens haurem d’aturar una mica, tenim una propietat amb dues funcions a dins, així que millor expliquem-ho per separat.
La propietat grid-template-columns serveix per definir la quantitat i el comportament de les columnes. Té moltes possibilitats, avui no entrarem del tot en detall però en propers articles acabareu posant nom a les columnes i definint fins i tot les files.
Els valors bàsics per un grid-template-columns poden ser simplement les mides de cada columna, per exemple: 100px auto 100px;
grid-template-columns: 100px auto 100px;
grid-template-columns: 100px 1fr 1fr 1fr;
El funcionament es ben senzill: podem definir la quantitat de columnes i l’ampalda de les mateixes simplement indicant la mida de cadascuna i el grid s’ocupa de tota la resta, fins i tot de realitzar els salts de línia.
A més podem fer-ho amb pixels (px), percentatges (%), fraccions (fr) o fins i tot amb el valor auto, totes elles combinades entre si.
Ja sé que estàs pensant que el codi inicial té alguna cosa més que unitats definides, i és cert, però abans de complicar-nos la vida val la pena que entenguis el funcionament normal de la propietat.
La funció repeat(), bé, doncs fa el que el seu nom indica. Aquests codis són equivalents:
grid-template-columns: repeat(3, 100px) auto;grid-template-columns: 100px 100px 100px auto;
Fin i tot podem utilitzar varies vegades la funció repeat com en el següent exemple on els dos codis donen el mateix resultat:
grid-template-columns: repeat(3, 100px) repeat(5, 50px);grid-template-columns: 100px 100px 100px 50px 50px 50px 50px 50px;
Però en el exemple del inici apareix el valor auto-fit en el lloc on hauríem de definir el número de columnes, i això és algo força xulo, ja que ens permet indicar que volem tantes columnes com elements existeixin dins el .c-grid (sense saltar mai a una segona fila).
Això ens permet definir un grid automàticament sobre la marxa.
I finalment tenim minmax(), que de fet quasi no necessita explicació: enlloc de donar una mida de la columna amb una mida absoluta o relativa com puguin ser pixels, fraccions o percentatges, indiquem que cada columna tingui un mínim i un màxim, en el nostre cas un mínim de 44px i un màxim de una fracció (1fr).
Com veieu, el CSS resultant és molt petit:
.c-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
}<section class="c-grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
— Val, això està molt bé. Però jo necessito alguna cosa més semblant a Bootstrap per poder ocupar dues o tres columnes, fer salts de línia, espais entre columnes, etc.
Totalment d’acord, i potser et farà una mica de rabiota si et dic que ja ho tinc fet, però els articles s’han de publicar d’un en un, així que en el proper article tractarem l’espai buit entre columnes (anomenat gap).
