Utilitzar-lo t'ajudarà a maquetar la teva web.

Per començar a explicar què és el Grid dins del CSS, cal conèixer exactament què és el concepte CSS.

Una pàgina web en si, és un document de text com si escribissim al bloc de notes. En aquest document s'escriu codi HTML, amb el qual es que crea el contingut d'una web. D'altra banda, hi ha el codi CSS, que unit al codi HTML permet donar-li forma, color, posició (i altres característiques visuals) a una pàgina.

Una vegada explicat el concepte CSS i veient la diferència amb el codi HTML, podem endinsar-nos al concepte 'Grid' dins del CSS.

Què és un Grid de disseny?

Un Grid és una quadrícula per maquetar el contingut de la teva pàgina sota unes guies bàsiques. Aquestes guies donen estabilitat al disseny, alineació i homogeneïtat. És cert que a més, ajuden a que el lloc web sigui Responsive (el disseny adaptable o adaptatiu), perquè amb poques regles de CSS, es pot tenir un disseny perfecte per a tots els dispositius.

Cada grid vertical té dues coses: columnes (cols) i carrers (gutters). Les columnes són les divisions més àmplies, mentre que els carrers es defineixen com els espais d'igualtat entre les columnes, el que en maquetació de paper es diu medianil. Fins i tot quan una quadrícula conté columnes de diferents amples de les amplades dels carrers solen ser estàtiques.

Que facis servir una graella no vol dir que tinguis un disseny web responsive, sinó que segueixes unes línies de maquetació.

Grids pensats pel disseny Responsive

El disseny responsive utilitza les 'queries' (consultes) de CSS perquè hi hagi diferents estils depenent de paràmetres com la mida de pantalla, resolució o orientació. Això significa que es pot variar la grandària, la visibilitat, el color o la forma dels elements en una mida determinada de la pantalla del dispositiu.

Per què utilitzar un Grid amb Disseny Web Responsive?

L'adaptació als diferents dispositius ja no només és una recomanació per facilitar als lectors la utilització de la teva web, sinó que pot afectar el teu posicionament o aparició a Google. El buscador vol que tot es vegi bé per garantir la millor experiència de navegació als usuaris.

Font: somoswaka