Jugant amb css — Grid columns start & end
Css temporada 1 capítol 3
Aquest és el tercer article d’una sèrie d’articles dedicats al CSS
Tal i com vam quedar, toca evolucionar aquest petit component, per tal de donar-l’hi algunes funcionalitats més concretes i provar de “copiar” un framework clàssic com bootstrap o similar.
L’amplada de les columnes
No serveix de gaire tenir un grid on no podem fer que algunes columnes ocupin més espai que d’altres. Per això necessitem crear classes de l’estil .c-grid__col-{N}.
.c-grid__col-2 {
grid-column-start: span 2;
grid-column-end: span 2;
}
.c-grid__col-3 {
grid-column-start: span 3;
grid-column-end: span 3;
}....c-grid__col-11 {
grid-column-start: span 11;
grid-column-end: span 11;
}
.c-grid__col-12 {
grid-column-start: span 12;
grid-column-end: span 12;
}
Definim classes per tenir fins a 12 columnes per seguir l’estructura habitual de frameworks com Bootstrap i altres semblants. Val a dir que més endavant veurem com aquí no tindrem limitació, ja que podrem fer grids de més o menys columnes si cal.
Ens estalviem craer la classe.c-grid__col-1 que ja es el comportament per defecte de cada element que formi part del grid.
Segur que pensareu que .c-grid__col-{N} podria ser un modificador del estil .c-grid__col--{N}, però seria ben estrany crear un modificador de la classe .c-grid__col…perquè no existeix! Els elements fills d’un Grid no necessiten tenir cap propietat concreta i per tant no cal definir una classe per a ells.
Més endavant veurem per què definim dues vegades l’amplada utilitzant dues propietats diferents grid-column-start i grid-column-end.
(Funcionaria només posant una de les dues i esborrant l’altra, però ho faig així per adaptar-ho a la funcionalitat final que tinc en ment i que acabaré fent més tard)
— I per què .c-grid__col-N i no .c-grid__item-N? —
Doncs perquè en el futur també farem grids amb rows, ja que CSS Grid permet fer el mateix procés en vertical i en horitzontal, així que m’estalvio canviar els noms de les classes més endavant. I encara que no acabem fent servir els rows, val la pena indicar en el nom de la classe quin comportament estem modificant per evitar confusions.
Fixeu-vos, ara afegint una classe ja aconseguim una columna doble!
<section class="c-grid c-grid--tiny-gap">
<div>1</div>
<div class="c-grid__col-2">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
10 o 12 columnes predefinides
Tot això molaria més si poguéssim fer varies línies, però com que he posat el valor auto-fit dins la funció repeat() de la propietat grid-template-columns, ara no hi ha manera de fer més d’una línia, ja que el grid té instruccions de dividir-se en tantes columnes com elements existeixin.
Amb el temps això et serà molt útil quan hagis de mostrar un apartat amb tres serveis destacats o semblant, i segur que un dia m’ho agrairàs… o no, però és cert que la majoria de vegades voldràs passar a tenir més d’una fila i sabràs amb antel·lació amb quantes columnes vols treballar.
Per això afegirem un parell de modificadors de la classe .c-grid:
.c-grid--ten {
grid-template-columns: repeat(10, 1fr);
}.c-grid--twelve {
grid-template-columns: repeat(12, 1fr);
}
Fixa’t que aquest cop sí que són modificadors del grid!
Amb aquestes dues classes tindrem un grid per treballar en qualsevol projecte. I com que el mateix grid ens sevirà per definir 10 o 12 columnes, podrem fer terços i cinquens en la mateixa web sense instal·lar dos frameworks diferents. (Ara n’hi ha que s’han posat palotes 😏)
<section class=”c-grid c-grid--ten c-grid--small-gap”>
<div></div>
<div class=”c-grid__col-9">.c-grid__col-9</div>
<div class=”c-grid__col-2">.c-grid__col-2</div>
<div class=”c-grid__col-8">.c-grid__col-8</div>
<div class=”c-grid__col-3">.c-grid__col-3</div>
...
<section class=”c-grid c-grid--twelve c-grid--small-gap”>
<div></div>
<div class=”c-grid__col-11">.c-grid__col-11</div>
<div class=”c-grid__col-2">.c-grid__col-2</div>
<div class=”c-grid__col-10">.c-grid__col-10</div>
<div class=”c-grid__col-3">.c-grid__col-3</div>
...
Com veieu, el salt de línia es genera automàticament cada vegada que els elements ocupen 10 o 12 columnes d’amplada (en funció del modificador escollit). Fixeuvos també que entre les línies hi ha el mateix espai que entre les columnes: el gap està funcionant correctament.
“Start & end” són els nous “push”
Segur que trobes a faltar un sistema per fer push a les columnes i deixar espais buits. No és que es faci servir gaire, la veritat, però mola tenir-ho perque els altres ho tenen (Culo veo, culo quiero! 😬)
Amb el CSS Grid el “push” no existeix: en realitat els frameworks afegeixen marges a la caixa per simular l’espai blanc de les columnes ignorades, però a utilitzant el grid, les columnes poden tenir diferents amplades realment. El que podem fer és definir on volem que començi i acabi una caixa.
Ara és quan els que estàveu atents entendreu el perquè del
grid-column-starti elgrid-column-endd’abans
Expliquem una mica els diferents valors que admeten aquestes propietats:
grid-column-start: {number or name}
grid-column-start: span {number}
grid-column-start: span {name}
grid-column-start: autogrid-column-end: {number or name}
grid-column-end: span {number}
grid-column-end: span {name}
grid-column-end: auto
grid__col-start: {number or name} pot definir el número (o nom) de la columna o fila on ha de començar la nostra caixa (spoiler! Nosaltres encara no hem posat noms a columnes ni hem definit files, queda reservat per el capítol 5).
grid__col-start: span {number} és la que s’ha utilitzat anteriorment per crear les classes de les caixes, amb ella definim l’amplada que volem ocupar en número de columnes.
grid__col-start: span {name} indica que la caixa s’estendrà fins la propera columna que tingui el nom indicat. Ho veurem més endavant.
grid__col-start: span auto no necessita explicació…oi?
I tenim les mateixes opcions per les files, que de moment no farem servir.
Ara centrem l’atenció a la primera línia, grid__col-start: {number or name}, que ens servirà per fer 12 modificadors del estil .c-grid__col-start-{N}:
.c-grid__col-start-1 {
grid-column-start: 1;
}
.c-grid__col-start-2 {
grid-column-start: 2;
}....c-grid__col-start-11 {
grid-column-start: 11;
}
.c-grid__col-start-12 {
grid-column-start: 12;
}
Amb aquest nous modificadors podem definir a cada columna creada on volem que comenci, i per tant comportaments com el següent:
Al lloro!
Ara podem fer salts de línia en grids automàtics que no siguin de 10 o 12 columnes predefinides. Com? doncs afegint el modificador .c-grid__col-start-1 a la columna que volem que aparegui en una nova fila!
I això encara que ara no ho sàpigues… t’obre un món de possibilitats, perquè pots fer grids d’un mateix contingut amb 5 elements en una fila i tres a la següent!
El mateix passa si fem 12 modificadors utilitzant end en comptes de start .c-grid__col-end-{N}. Això ens permet indicar en quina columna ha d’acabar una caixa.
.c-grid__col-end-1 {
grid-column-end: 2;
}
.c-grid__col-end-2 {
grid-column-end: 3;
}....c-grid__col-end-11 {
grid-column-end: 12;
}
.c-grid__col-end-12 {
grid-column-end: 13;
}
Per tant podrem estalviar-nos dir quantes columnes ha d’ocupar una caixa, simplement podem indicar on comença i on acaba.
— Per què el grid-column-end te un valor més gran? —
M’agrada que em facis aquesta pregunta, això es que t’hi has fixat.
La propietat grid-column-end: 5 indica que la caixa ha d’arribar fins la columna 5, però no pas ocupar-la. Per tant, si volem que ocupi també la columna 5 hem de donar el valor 6.
Quan treballem per columnes jo trobo més lògic fer-ho així, en indicar les classesc-grid__col-start-4 c-grid__col-end-5 sabrem que la caixa ocuparà desde la columna 4 fins a la columna 5, ambdues incloses. Si no hauríem dedir c-grid__col-start-4 c-grid__col-end-6 per ocupar dues columnes, la 4 i la 5. Entenc que aquest punt és discutible i ja trobarem la manera ideal de fer-ho amb el temps.
— No t’has passat amb tot això del start i el end ara? De debò té utilitat?—
I tant que sí! Imagina que tens un layout semblant a això:
Imagina també que les columnes 1 i 3 són opcionals i no sempre apareixen. En aquest cas, la columna del contingut ha de eixamplar-se fins a ocupar el màxim possible.
En altres frameworks estas obligat a saber quina és l’amplada de la columna desapareguda per tal de sumar aquestes fraccions a la columna central, o sigui si la columna central és de 6 i desapareix la columna de la dreta, que és de 3, haurem de dir a la columna central que sigui de 9.
En el nostre grid fet amb CSS Grid no cal saber si l’amplada de la columna de la dreta era de 3, 4 o 5 fraccions. En cas que desaparegui la columna de la dreta, direm a la columna del mig que acabi a la columna 12 afegint la classe .c-grid__col-end-12,i aquesta creixerà fins al final automàticament. I en cas de desaparèixer la columna de l’esquerra li direm que comenci a la primera columna afegint la classe .c-grid__col-end-1
Com ho veus? Millor? Pitjor? Segurament deu ser simplement diferent, en alguns casos anirà millor, en altres pitjor. Però al final es tracta de provar-ho.
En el proper article ho farem tot una mica més responsive per deixar tancat el component de grid bàsic.
