Maquetació web amb CSS Grid

A finals de l’any 2017 el món del desenvolupament web va viure una petita-gran revolució amb l’aparició del CSS Grid, una nova manera de maquetar dissenys a la web en un espai de quadrícula bidimensional, independent a l’ordre de posicionament i extremadament flexible.

Per primera vegada disposàvem d’un sistema de quadrícules natiu als navegadors, que possibilitava definir columnes i files sense necessitat de fixar-les a l’HTML, per tal de simplificar el procés de situar i distribuir els elements al llarg i ample d’una pàgina web.

En conseqüència, CSS Grid ens proporciona un conjunt d’avantatges:

• Podem crear dissenys més complexes sense la necessitat d’utilitzar JavaScript en tant que es pot treballar amb columnes i files simultàniament.
• Ens oblidem d’utilitzar frameworks CSS externs (com Bootstrap o Foundation) o mecanismes com el posicionament relatiu/absolut, floats i elements en bloc o en línia.
• Aconseguim un codi molt més entenedor i fàcil de mantenir en termes de desenvolupament.

En un exemple pràctic, per crear les zones d’una web amb un framework CSS de 12 columnes, necessitaríem tenir un HTML com aquest, on els elements els situaríem a la fila on volem que apareguin per després aplicar l’estil:

<div class="row">
<div class="col-xs-12 header">HEADER</div>
</div>
<div class="row">
<div class="col-xs-4 menu">MENU</div>
<div class="col-xs-8 content">CONTENT</div>
</div>
<div class="row">
<div class="col-xs-12 footer">FOOTER</div>
</div>

A l’instant podem veure com amb CSS Grid el codi és molt més simple, sense necessitat de definir classes extres i files addicionals:

<div class="grid">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>

Cadascun dels elements que formen les zones de la web (header, menu, content, footer…), amb CSS Grid, a diferència d’utilitzar altres tècniques, els podrem col·locar allà on vulguem sense necessitat de moure’ls físicament de l’HTML, utilitzant poques línies de CSS:

* {margin: 0; padding: 0;}
.grid {display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: minmax(100px, auto) 1fr minmax(100px, auto); min-height: 100vh;}
.header {grid-column: span 12;}
.menu {grid-column: span 4;}
.content {grid-column: span 8;}
.footer {grid-column: span 12;}

Tampoc estarem limitats a treballar amb una quadrícula de 12 columnes (com a l’exemple) per fer una web adaptable a totes les mides de dispositius. Si volem que siguin 5 o 3 columnes, endavant, cap problema! I és que ara fer dissenys flexibles no estarà limitat a regles matemàtiques de grids de 960px o 1200px.

Maquetació web amb CSS Grid

I per resoldre això, va aparèixer la nova unitat de mesura de longitud FR (una fracció) que representa parts de l’espai disponible que tenim a la nostra columna o fila, ajudant-nos així a definir l’extensió que volem que ompli un element en proporció a la mida total que ens ocupa la web en el dispositiu on l’estem visualitzant.

Molts afirmen que CSS no és un llenguatge de programació. I hi estic d’acord: És més dur. El domini de CSS requereix habilitats en disseny, determinació, experiència i codificació. I és que crear codi que funcioni correctament en tots els dispositius i resolucions de pantalla és un repte que no tots intenten o assoleixen amb èxit.

Concloent, CSS Grid no és en absolut una moda més del desenvolupament web que podem o no adoptar, és el futur de la maquetació (ara ja present) que ha vingut per quedar-se vulgueu o no. Som-hi doncs?