Jugant amb CSS Grid — Alineació
CSS temporada 1 capítol 6
Aquest és el sisè article d’una sèrie d’articles dedicats al CSS Grid:
En aquest darrer article tractarem les últimes propietats que ens falta per veure:justify-content align-content justify-items align-items justify-self align-self.
Com ja podeu imaginar serveixen per justificar i alinear els elements dins les àrees del Grid.
Però abans de començar cal recordar que el nostre Grid és molt molón 😜 i automàtic, i s’adapta sol a la mida del seu contenidor.
No crearé uns modificadors per al nostre codi CSS, que a mi en realitat ja m’agrada que aquest ocupi sempre tot l’espai disponible i controlar per un altra banda com és comporta aquest contenidor.
Per tant, si volem jugar a justificar un Grid primer haurem de crear-ne un sense mides de fraccions i deixar el valor de la mida a “auto”.
display: grid;
grid-template-columns: repeat(5, auto);
grid-template-rows: repeat(2, auto);/* Una mica d'estil i alçada per veure l'exemple */
border: solid 1px #ccc;
height: 100px;
Ara si, podem començar amb justify-content i align-content, que serviran per justificar i alinear tot el Grid en si mateix.
Amb el marge de color gris veiem l’espai que ocupa en realitat el Grid encara que estigui buit per l’alineació i la justificació.
Segur que t’ha agradat el valor center i que has pensat la possibilitat de centrar textos o blocs html dins d’un espai utilitzant només CSS Grid. Enhorabona: podràs fer-ho!
/* Definimun bloc quadrat de 300px per l'exemple... */
border: solid 1px #ccc;
width: 300px;
height: 300px;/* ...i el convertim en un Grid */
display: grid;
justify-content: center;
align-content: center;
Les possibilitats en CSS com sempre acostumen a ser enormes, dependrà de tu el suc que li puguis treure.
Juguem ara amb els elements del Grid
D’això sí que en podríem fer classes modificadores pels nostre component, però t’ho deixo a tu i així no t’ho dono tot mastegat 😉
Utilitzarem les propietatsjustify-items i align-items, que afecten a la justificació i l’alineació de cada element intern:
/* Fem un grid amb mides absolutes de 4 blocs quadrats de 200px repartits en dues files i dues columnes*/
display: grid;
grid-template-columns: repeat(2, 200px);
grid-template-rows: repeat(2, 200px);
No cal dir que les propietats es poden combinar com vulguem:
De fet, a l’hora de combinar alineació i justificació es pot fer tant a nivell del Grid com a nivell de cada element, perquè la propietat justify sempre defineix l’espai i posició que ocupa d’esquerra a dreta, i la propietat align ho fa verticalment de dalt a baix.
Aquí us deixo un codepen amb les diferents alineacions que admet un element dins un Grid.
Si encara us queda algun dubte sobre CSS Grid podeu deixar comentaris, que intentaré resoldre tot el que pugui i sàpiga.
