Graelles (Grids)

Les graelles són una eina de disseny de pàgines web consolidada i molts dissenys de pàgines web moderns basen els seus dissenys de pàgina web en una graella regular. En aquest article analitzarem el disseny de pàgines web basats en graella i com es pot utilitzar CSS per a crear graelles, tant amb les eines presents com amb les noves tecnologies que comencen a estar disponibles en els navegadors.

Prerequisits: Conceptes bàsics d'HTML (consulta la Introducció a HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS i Aplicar estil a les caixes.)
Objectiu: Entendre els conceptes fonamentals que hi ha darrere dels sistemes de disseny de pàgines web amb graella i la manera com implementar un disseny de pàgina web basat en graella.

Què és el disseny de pàgines web basat en graella?

Una graella és senzillament una col·lecció de línies horitzontals i verticals que creen un patró que ens serveix per a alinear els elements del disseny d’una pàgina web. Ens ajuden a crear dissenys en què els elements no es mouen ni canvien d'amplada a mesura que naveguem de pàgina en pàgina, i proporcionen més coherència als nostres llocs web.

Normalment, una graella té columnes (columns), files (rows) i espais entre cada fila i columna, que anomenem comunament canals (gutters).

[Diagrama temporal; Serà substituït per un diagrama millor, aviat.]

Nota: Qualsevol qui tingui nocions de disseny CSS es pot sorprendre pel fet que el CSS no incorpori un sistema de creació de graelles, sinó que s’utilitzen diversos mètodes no del tot òptims per a crear dissenys de pàgines web que simulen una graella. Com esbrinaràs en la darrera part d'aquest article, això comença a canviar, però és probable que encara hagis de conviure amb els mètodes de creació de graelles durant un temps.

Un «sistema de graella» per al teu projecte

Si et vols basar des del principi en un sistema de graella per a garantir que el teu lloc web o aplicació ofereix una experiència d’usuari coherent, no et cal pensar en les amplituds dels element en relació amb els altres. La teva elecció es limita a «quantes columnes de la graella ocuparà aquest element».

El teu «sistema de graella» pot venir senzillament d’haver pres la decisió d’utilitzar una graella regular durant el procés de disseny. Si els teus dissenys de pàgina web neixen en una aplicació d'edició de gràfics com Photoshop, durant aquest procés pots crear una graella perquè et serveixi de referència, com es descriu en A better Photoshop grid for responsive web design d'Elliot Jay Stocks.

El sistema de graella també pot ser un marc (framework), que tant pot haver creat un tercer com tu mateix, només per al teu projecte, que utilitzaràs per a establir una graella amb CSS.

Creació de marcs (frameworks) de graella senzills

Comencem per veure com pots crear un marc de graella senzill per al teu projecte.

Avui la majoria dels dissenys de pàgines web basats en graella es creen amb elements flotants. Si has llegit el nostre article anterior sobre elements flotants, ja has vist com es pot fer servir aquesta tècnica per a crear un disseny de columnes múltiples, que és l'essència de qualsevol sistema de graella que utilitza aquest mètode.

El tipus de marc de graella més senzill que pots fer servir per a crear una graella és un marc d'amplada fixa; només cal que determinis l'amplada total que vols que tingui el teu disseny de pàgina web, quantes columnes hi vols i de quines dimensions han de ser els canals i les columnes. En canvi, si decideixes fer un disseny de pàgina web basat en graella amb columnes que creixen o s'encongeixen segons l'amplada del navegador, has de calcular les amplades de les columnes i dels canals que hi ha entre elles en termes de percentatges.

En les seccions següents veuràs com crear totes dues coses. Crearem una graella de 12 columnes; és una elecció molt comuna perquè es pot adaptar molt bé a moltes situacions diferents, atès que 12 és divisible per 6, 4, 3 i 2.

Una graella senzilla d'amplada fixa

En primer lloc creem un sistema de graella amb columnes d'amplada fixa.

Fer una còpia local del nostre fitxer exemple simple-grid.html, que conté el codi d’etiquetatge següent en el body.

<div class="wrapper">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
  </div>
  <div class="row">
    <div class="col span1">13</div>
    <div class="col span6">14</div>
    <div class="col span3">15</div>
    <div class="col span2">16</div>    
  </div>
</div>

L'objectiu és construir una graella d’exemple amb dues files i dotze columnes, la fila de dalt dividida en àrees de la mida de cada columna, i la segona fila amb algunes àrees de mides diferents.

Afegeix en l'element <style> el codi següent; primer demanes que tots els elements de la pàgina siguin caixes amb una mida que ocupi fins a la vora, i a continuació proporciones al contenidor una amplada de 980 píxels amb una àrea de farciment de 20 píxels pel costat dret. Això ens deixa 960 píxels per a l’amplada total de columnes/canals.

* {
  box-sizing: border-box;
}
    

body {
  width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 20px;
}

Ara utilitza el contenidor de fila que delimita cada fila de la graella per a mantenir una fila separada de l’altra. Afegeix a sota del codi anterior la regla següent:

.row {
  clear: both;
}

L'aplicació d'aquesta neteja significa que els elements de cada fila no han d’ocupar necessàriament tota l’amplada de les dotze columnes. Les files es mantenen separades i no interfereixen entre elles.

Els canals que separen les columnes tenen 20 píxels d'amplada. Creem aquests canals com un marge a la part esquerra de cada columna, inclosa la primera columna, per a equilibrar els 20 píxels de l’àrea de farciment que hem establert en el costat dret del contenidor. Així, si en total hi ha 12 canals: 12 x 20 = 240.

Hem de restar això de la nostra amplada total de 960 píxels, i ens deixa 720 píxels per a les nostres columnes. Si dividim aquesta quantitat per 12, obtenim que cada columna ha d’ocupar 60 píxels d'amplada.

El pas següent és crear una regla per a la classe .col, convertir-la en un element flotant per l’esquerra i donar-hi un margin-left de 20 píxels que formi el canal, i una amplada (width) de 60 píxels. Afegeix al final del teu CSS la regla següent:

.col {
  float: left;
  margin-left: 20px;
  width: 60px;
  background: rgb(255, 150, 150);
}

Ara les columnes de la fila de dalt es disposen efectivament com una graella.

Nota: També hem donat a cada columna un color vermell clar perquè puguis veure exactament quant d’espai ocupa cadascuna.

Cal definir unes classes especials per als elements contenidors del disseny de pàgina web que voldrem que ocupin més d'una columna, per a ajustar-ne els valors d’amplada (width) al nombre necessari de columnes (i de canals que hi hagi entre elles). Hem de crear classes addicionals que ens permetin definir contenidors que ocupin de 2 a 12 columnes. Cada amplada és el resultat de sumar l'amplada de columna d'aquest nombre de columnes, més l'amplada dels canals, que sempre cal comptar una de menys que el nombre de columnes.

Afegeix a la part inferior del teu CSS el codi següent:

/* Two column widths (120px) plus one gutter width (20px) */
.col.span2 { width: 140px; }
/* Three column widths (180px) plus two gutter widths (40px) */
.col.span3 { width: 220px; }
/* And so on... */
.col.span4 { width: 300px; }
.col.span5 { width: 380px; }
.col.span6 { width: 460px; }
.col.span7 { width: 540px; }
.col.span8 { width: 620px; }
.col.span9 { width: 700px; }
.col.span10 { width: 780px; }
.col.span11 { width: 860px; }
.col.span12 { width: 940px; }

Amb la creació d’aquestes classes pots obtenir columnes que tinguin amplades diferents sobre la graella. Desa la pàgina, carrega-la al teu navegador i observa’n els efectes.

Nota: Si l'exemple anterior no et funciona, pots contrastar-lo amb la nostra versió final a GitHub (o consultar-ne la versió en viu).

Modifica les classes dels teus elements, o fins i tot afegeix-hi i elimina’n uns quants contenidors, i observa com varia el disseny de pàgina. Per exemple, pots fer que la segona fila s’assembli a això:

<div class="row">
  <div class="col span8">13</div>
  <div class="col span4">14</div>
</div>

Ara ja tens implantat un sistema basat en graella, pots definir el nombre de files i el nombre de columnes de cada fila, i a continuació, omplir cada contenidor amb el contingut necessari. Genial!

Crear una graella fluida

La nostra graella funciona bé, però té una amplada fixa. En realitat volem una graella flexible (fluida) que creixi o s'encongeixi segons l'espai que hi hagi disponible en la finestra de visualització (viewport). Per a fer-ho, podem convertir els valors en píxels de les amplades de referència, a percentatges.

Pots convertir una amplada fixa en una de flexible basada en un percentatge amb la fórmula següent.

target / context = result

L’amplada objectiu per a les nostres columnes és de 60 píxels i el nostre context és el contenidor de 960 píxels que fa d’embolcall (wrapper). Podem calcular aquestes xifres en percentatges amb la fórmula següent.

60 / 960 = 0.0625

A continuació, movem el punt decimal 2 llocs i ens dona un percentatge del 6,25%. Així, en el nostre CSS podem reemplaçar l'amplada de la columna de 60 píxels per un 6.25%.

Hem de fer el mateix amb l'amplada dels canals:

20 / 960 = 0.02083333333

Per tant, els 20 píxels del marge esquerre (margin-left) de la nostra regla .col i els 20 píxels de l’àrea de farciment de la dreta (padding-right) en el selector .wrapper s’han de reemplaçar pel percentatge 2.08333333%.

Actualitza la graella

Per començar en aquesta secció, fes una altra còpia de la pàgina de l'exemple anterior o fes una còpia del nostre codi simple-grid-finished.html en local i utilitza’l de punt de partida.

Actualitza la segona regla CSS (amb el selector .wrapper) de la manera següent:

body {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 2.08333333%;
}

No només hem donat un percentatge d’amplada (width), sinó que també hem afegit una propietat max-width que evita que el disseny de pàgina sigui massa ample.

A continuació actualitza la quarta regla del CSS (amb el selector .col) perquè quedi així:

.col {
  float: left;
  margin-left: 2.08333333%;
  width: 6.25%;
  background: rgb(255, 150, 150);
}

Ara ve la part una mica més laboriosa; hem de definir totes les nostres regles .col.span en termes d’amplades en percentatges, en lloc de píxels. Com que és una estoneta de feina amb una calculadora,ho hem fet per tu a continuació, i així te n’estalviem l’esforç.

Actualitza la part final del bloc de regles CSS amb el codi següent:

/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
.col.span2 { width: 14.58333333%; }
/* Three column widths (18.75%) plus two gutter widths (4.1666666) */
.col.span3 { width: 22.91666666%; }
/* And so on... */
.col.span4 { width: 31.24999999%; }
.col.span5 { width: 39.58333332%; }
.col.span6 { width: 47.91666665%; }
.col.span7 { width: 56.24999998%; }
.col.span8 { width: 64.58333331%; }
.col.span9 { width: 72.91666664%; }
.col.span10 { width: 81.24999997%; }
.col.span11 { width: 89.5833333%; }
.col.span12 { width: 97.91666663%; }

Ara desa el codi, carrega’l al navegador i canvia l'amplada de la teva finestra de visualització; observa que l’amplada de les columnes s’hi ajusta bé. Genial!

Nota: Si l’exemple no et funciona, contrata’l amb la nostra versió final acabada a GitHub (o consulta’n la versió en viu).

La funció calc()

Pots fer servir la funció calc () per a calcular els valors CSS directament. Aquesta funció et permet inserir equacions matemàtiques senzilles per a calcular valors en CSS. És útil sobretot quan els càlculs són complexos, i fins i tot es poden fer càlculs amb valors en unitats diferents, per exemple «Vull que l'alçada d'aquest element sigui sempre el 100% de l'alçada de l’element pare, menys 50px». Consulta aquest exemple d'un tutorial de l'API de MediaRecorder.

Però, tornem a les nostres graelles! Qualsevol columna que ocupi més d'una columna de la nostra graella té una amplada total del 6,25%, multiplicada pel nombre de columnes que ocupa, i hi hem de sumar el 2.08333333% multiplicat pel nombre de canals (que sempre és el nombre de columnes menys 1). La funció calc() ens permet fer aquest càlcul directament dins del valor de l'amplada, de manera que si un element ocupa, per exemple, 4 columnes:

.col.span4 {
  width: calc((6.25%*4) + (2.08333333%*3));
}

Substitueix la part de sota del bloc de regles CSS amb el codi següent, torna’l a carregar al navegador, i observa’n el resultat:

.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }

Nota: Consulta la nostra versió acabada en el fitxer fluid-grid-calc.html (o consulta’n la versió en viu).

Nota: Si no et surt, pot ser que el teu navegador no sigui compatible amb la funció calc(), tot i que té força compatibilitat amb els navegadors, des de l’IE9.

Graella semàntica i no semàntica

Afegir classes al teu codi d’etiquetatge per a definir el disseny de pàgina web significa vincular el contingut i l’etiquetatge amb la presentació visual. De vegades sentiràs dir que fas un ús «no semàntic» de les classes CSS, perquè defineixen com es presenta el contingut, en lloc d’un ús semàntic de les classes, que en defineix el contingut. Aquest és el cas amb les nostres classes span2, span3, etc.

Però aquest no és l'únic enfocament. També pots decidir quin tipus de graella vols, i a continuació afegir la informació de la mida en les regles associades a les classes semàntiques que ja tens. Per exemple, si vols que un element <div> amb un contingut ocupi 8 columnes, pots afegir a aquella classe una regla que copiaràs de l'amplada de la classe span8:

.content {
  width: calc((6.25%*8) + (2.08333333%*7));
}

Nota: Si fas servir un preprocesador com Sass, pots crear un mixin simple que insereixi aquest valor per tu.

Desplaçar contenidors per la graella

La graella que hem creat funciona bé sempre que vulguis iniciar tots els contenidors arran de la part esquerra de la graella. Si vols deixar un espai buit en la columna abans del primer contenidor, o entre els contenidors, has de crear una classe que afegeixi un marge esquerre al nostre lloc i el desplaci per la graella. Més càlculs!

Prova-ho!

Comença amb el teu codi anterior o fes servir el nostre fitxer fluid-grid.html com a punt de partida.

Fem una classe en el nostre CSS que desplaçarà un element contenidor una amplada de columna enllà. Afegeix a la part inferior del teu CSS el codi següent:

.offset-by-one {
  margin-left: calc(6.25% + (2.08333333%*2));
}

O bé aquest, si prefereixes calcular-ne els percentatges:

.offset-by-one {
  margin-left: 10.41666666%;
}

Ara pots afegir aquesta classe a qualsevol contenidor que vols que deixi un espai buit d'una columna a l'esquerra. Per exemple, si en el teu HTML hi ha això:

<div class="col span6">14</div>

Substitueix-ho per:

<div class="col span5 offset-by-one">14</div>

Nota: Recorda que has de reduir el nombre de columnes ocupades perquè es pugui fer el desplaçament!

Actualitza el codi i carrega’l al navegador, i observa’n la diferència, o consulta el nostre exemple en el fitxer fluid-grid-offset.html (o consulta’n l’exemple en viu). L'exemple acabat hauria de tenir un aspecte semblant a això:

Note: Com un exercici extra, pots implementar una classe offset-by-two?

Limitacions de la graella flotant

Quan fas servir un sistema com aquest, has de calcular correctament l’amplada total, que en una fila no hi hagi elements que ocupin més columnes que les que té la fila. Per la manera com funcionen els elements flotants, si el nombre de columnes de la graella és massa ample per a la graella, els elements del final de la fila salten de línia i la graella es trenca.

També has de tenir en compte que si el contingut dels elements és més ample que les files que ocupa, el contingut desborda, i el resultat pot ser un garbuix.

La restricció principal d'aquest sistema és que és essencialment unidimensional. Tracta columnes i elements que ocupen columnes, però no files. És molt difícil que aquests mètodes de disseny de pàgines web més antics controlin l'alçada dels elements sense establir-ne l’alçada explícitament, i això també és un enfocament molt poc flexible, només funciona si pots garantir que el teu contingut té una alçada determinada.

Graelles Flexbox

Podries pensar que el sistema flexbox que s’explica en el nostre article anterior és la solució ideal per a crear un sistema en graella. Actualment hi ha disponible un seguit de sistemes basats en graella que es basen en l’ús d’elements flexbox amb què es poden resoldre molts dels problemes que hem descobert en crear la nostra graella anterior.

Ara bé, flexbox mai es va dissenyar per a definir un sistema basat en graella i planteja un conjunt nou de desafiaments quan s'utilitza amb aquest objectiu. Com a exemple senzill d'això, podem emprar el mateix codi d'exemple que hem fet servir abans i utilitzar el CSS següent per a aplicar estil a les classes wrapper de les files i les columnes:

body {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 2.08333333%;
}


.row {
  display: flex;
}

.col {
  margin-left: 2.08333333%;
  margin-bottom: 1em;
  width: 6.25%;
  flex: 1 1 auto;
  background: rgb(255,150,150);
}

Fes aquestes substitucions en el teu exemple o consulta el nostre codi d'exemple en el fitxer flexbox-grid.html (o consulta’n l’exemple en viu).

Aquí convertim cada fila en un contenidor flexible. Amb una graella basada en elements flexbox, encara necessitem files per a poder tenir elements que sumin menys de 100%. Hem configurat aquest contenidor amb la declaració display: flex.

En .col establim el primer valor de la propietat flex (flex-grow) a 1 perquè els nostres elements puguin créixer, el segon valor (flex-shrink) a 1 perquè els elements es puguin encongir, i el tercer valor (flex-basis) a auto. Com que el nostre element té una amplada (width) establerta, auto utilitzarà aquesta amplada com a valor de flex-basis.

A la línia superior hi ha dotze caixes ordenades en una graella, i creixen o s'encongeixen de la mateixa manera a mesura que canviem l'ample de la finestra de visualització. Però en la segona fila només hi ha quatre elements, i aquests també creixen i s'encongeixen a partir d'aquesta base de 60 píxels. Com que només n’hi ha quatre, poden ser molt més grans que els elements de la fila anterior. El resultat és que tots els elements de la segona fila ocupen la mateixa amplada.

Manca incloure-hi les nostres classes span, que proporcionen l’amplada que substitueix el valor utilitzat per flex-basis per a aquest element.

A més, aquests elements tampoc no respecten la graella que utilitzen els elements de la fila de dalt, perquè no en saben res.

Flexbox és un disseny unidimensional. Tracta una sola dimensió, una fila o una columna. No podem crear una graella estricta només per a columnes o només per a files, és a dir, si fem servir elements flexbox per a la nostra graella, també hem de calcular percentatges, com hem fet per al disseny amb elements flotants.

També pots optar per fer una 'graella' amb elements flexbox a partir de l'alineació addicional i les capacitats de distribució en l’espai que els elements flotants flexbox proporcionen. Però aleshores has de tenir present que fas servir una eina per a una cosa diferent d’allò per a la qual es va dissenyar, i pot semblar que fas una drecera per a arribar al resultat final que busques.

Sistemes en graella de tercers

Ara que entenem els càlculs que hi ha darrere de la nostra graella, és un bon moment per a veure alguns dels sistemes basats en graella de tercers d'ús comú. Si cerques «CSS Grid framework» al web, trobes una gran llista d'opcions per triar, inclosos marcs de graella populars com Bootstrap i Foundation. També hi ha sistemes basats en graella independents, desenvolupats tant amb CSS com amb preprocessadors.

Donem un cop d'ull a un d'aquests sistemes independents perquè mostra les tècniques comunes de treball amb un marc de graella. La graella que utilitzarem forma part d’Skeleton, un marc de graella CSS senzill.

Per començar, visita la pàgina web d’Skeleton i selecciona «Descarrega» per a baixar-te el fitxer ZIP. Descomprimeix-lo i copia els fitxers skeleton.css i normalize.css en un directori nou.

Fes una còpia del fitxer html-skeleton.html i desa’l al mateix directori que els fitxers skeleton i normalize amb el CSS.

Afegeix a la capçalera (<head>) de la pàgina HTML les declaracions següents per a incloure els CSS dels fitxers skeleton i normalize:

<link href="normalize.css" rel="stylesheet">
<link href="skeleton.css" rel="stylesheet">

Skeleton inclou més d'un sistema de graella; també inclou CSS per a tipografia i altres elements de pàgina, que pots utilitzar com a punt de partida. Tanmateix, aquí deixarem aquests valors per defecte perquè el que ens interessa és la graella.

Nota: normalize és una petita biblioteca CSS molt útil, desenvolupada per Nicolas Gallagher, que implementa automàticament algunes solucions útils de disseny de pàgines web bàsic i dona un estil més coherent als elements predeterminats en tots els navegadors.

Utilitzarem un HTML semblant al del nostre exemple anterior. Afegeix al cos del teu HTML les línies següents:

<div class="container">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
  </div>
  <div class="row">
    <div class="col">13</div>
    <div class="col">14</div>
    <div class="col">15</div>
    <div class="col">16</div>   
  </div>
</div>


Per començar a usar Skeleton has d’assignar a l’element <div> una classe container; això ja està inclòs en el nostre HTML. Centra el contingut amb una amplada màxima de 960 píxels. Observa que les caixes mai no arriben a ser més amples que 960 píxels.

Dona una ullada al fitxer skeleton.css i observa quin CSS s'utilitza quan s'aplica aquesta classe. L’element <div> es centra amb auto pels marges esquerre i dret, i s'aplica una àrea de farciment de 20 píxels a l'esquerra i a la dreta. Skeleton també estableix la propietat box-sizing a border-box, com hem fet abans, de manera que l'amplada total d'aquest element inclou l’àrea de farciment i les vores.

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

Els elements només poden formar part de la graella si estan dins d'una fila, de manera que, com en l’exemple anterior, cal un element <div> o algun altre element amb una classe row imbricada en el content de l’element <div> i el contenidor amb els elements <div> amb contingut real. Això ja ho hem fet.

Ara dissenyarem les caixes del contenidor. Skeleton es basa en una graella de 12 columnes. Les caixes de la línia de dalt necessiten una classe one column perquè ocupin una columna.

Afegeix-los ara, tal com es mostra en el fragment següent:

<div class="container">
  <div class="row">
    <div class="one column">1</div>
    <div class="one column">2</div>        
    <div class="one column">3</div>
    /* and so on */
  </div>
</div>

A continuació assigna a cada contenidor a partir de la segona fila la classe que especifica el nombre de columnes que ha d'ocupar, així:

<div class="row">
  <div class="one column">13</div>
  <div class="six columns">14</div>
  <div class="three columns">15</div>
  <div class="two columns">16</div>   
</div>

Desa el teu fitxer HTML, carrega’l al navegador i observa’n l'efecte.

Nota: Si l’exemple no et funciona, contrasta’l amb el nostre fitxer html-skeleton-finished.html (o consulta’n l’exemple en viu).

Observa com funciona el fitxer skeleton.css. Per exemple, Skeleton té els següents elements d'estil definits amb classes de «tres columnes» que s'hi afegeixen.

.three.columns { width: 22%; }

Skeleton (o qualsevol altre marc de graella) configura classes predefinides que pots afegir al teu etiquetatge. És exactament el mateix que si tu mateix fas el treball de calcular aquests percentatges.

Com pots veure, hem d'escriure molt poc CSS quan utilitzem Skeleton. Tracta per nosaltres tots els elements flotants quan afegim classes al marcatge. Aquesta capacitat de fer-se càrrec de la distribució dels elements fa de l'ús d'un marc de graella una elecció convincent!

Skeleton és un sistema basat en graella més senzill que d’altres marcs que pots trobar. Les graelles de marcs de graella grans com Bootstrap i Foundation ofereixen més funcions i més punts d'interrupció per a diverses amplades de pantalla. Però tots funcionen de manera semblant, afegeixen classes específiques al teu marcatge que et permeten controlar com es col·loca l'element sobre la graella predefinida.

Graelles CSS nadiues amb disseny de pàgines web en graella

Hem dit al principi d'aquest article que el CSS no té cap sistema de creació de dissenys de pàgines web basats en graella; però això canviarà aviat. Tot i que encara no podem utilitzar un sistema nadiu basat en graelles CSS, l'any vinent tots els navegadors ja haurien de tenir compatibilitat amb el Mòdul de disseny de pàgines web basat en graella CSS.

Actualment només pots utilitzar la tècnica que et mostrarem en els navegadors que implementen el disseny de pàgines web amb graella CSS «darrere d'una bandera», que significa que ja està implementat, però en un estat experimental, que has d’habilitar per a poder-lo fer servir.

En Firefox, per exemple, per a habilitar les graelles CSS has de visitar l’URL about:config, cercar-hi la preferència layout.css.grid.enabled i fer-hi doble clic. Consulta Grid by example per a esbrinar com habilitar-lo en altres navegadors.

Hem vist el marc de graella Skeleton per sobre; com altres graelles de tercers i fins i tot graelles construïdes a mà, requereix afegir elements <div> que formen files, i a continuació especificar quantes columnes ocupen els elements que hi ha en aquestes files.

Amb el disseny de pàgines web basat en graella CSS, pots especificar la teva graella completament en CSS, sense necessitat d'afegir totes aquestes classes auxiliars per a l’etiquetatge. Prenguem el nostre senzill exemple i vegem com crearíem aquest mateix disseny utilitzant el disseny de pàgines web basat en graella CSS.

Construir una graella nadiua

Primer, comenceu per fer una còpia local del fitxer css-grid.html Conté el següent marcatge:

<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
  <div class="col">7</div>
  <div class="col">8</div>
  <div class="col">9</div>
  <div class="col">10</div>
  <div class="col">11</div>
  <div class="col">12</div>
  <div class="col">13</div>
  <div class="col span6">14</div>
  <div class="col span3">15</div>
  <div class="col span2">16</div>       
</div>

Aquesta vegada hi ha un element <div> pare amb una classe wrapper, i a continuació tots els elements fill apareixen directament a l'interior de l'embolcall, sense elements de fila. Hem afegit una classe als elements que ocuparan més d'una columna.

Ara afegeix dins de l'element <style> el codi següent:

.wrapper {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
}

.col {
  background: rgb(255,150,150);
}

Aquí establim la regla perquè l’element .wrapper sigui el 90% de l'amplada del cos, estigui centrat i ocupi una amplada màxima (max-width) de 960px.

Ara continuem amb les propietats de la graella CSS. Podem declarar una graella amb el valor grid de la propietat display, configurar un canal amb la propietat grid-gap i després crear una graella de 12 columnes de la mateixa amplada amb grid-template-columns, la nova funció repeat() i una unitat nova definida per al disseny de pàgines web amb graella: la unitat fr.

La unitat fr és una unitat fraccionària, que descriu una fracció de l'espai disponible en el contenidor de la graella. Si totes les columnes són 1fr, cadascuna ocupa una quantitat igual de l'espai del contenidor. Això elimina la necessitat d’haver de calcular percentatges, com fèiem en crear una graella amb elements flexibles.

Després de crear una graella, les regles de col·locació automàtica de la graella mostren immediatament les nostres caixes en aquesta graella i obtenim un disseny de graella flexible de dotze columnes.

Per a dissenyar contenidors que ocupen diverses traces de columna en la graella, podem utilitzar la propietat grid-column. Per exemple, per a un element que ocupi 6 columnes:

.span6 {
  grid-column: auto / span 6;
}

Perquè un element ocupi 3 columnes:

.span3 {
  grid-column: auto / span 3;
}

El valor que hi ha abans de la barra inclinada és la línia d'inici; en aquest cas no la definim explícitament i permetem que el navegador col·loqui l'element a la línia següent disponible. A continuació, podem establir que ocupi 6, o 3, o tantes línies com desitgem.

Afegeix a la part de baix del teu codi CSS les línies següents:

.span2 { grid-column: auto / span 2;}
.span3 { grid-column: auto / span 3;}
.span4 { grid-column: auto / span 4;}
.span5 { grid-column: auto / span 5;}
.span6 { grid-column: auto / span 6;}
.span7 { grid-column: auto / span 7;}
.span8 { grid-column: auto / span 8;}
.span9 { grid-column: auto / span 9;}
.span10 { grid-column: auto / span 10;}
.span11 { grid-column: auto / span 11;}
.span12 { grid-column: auto / span 12;}

Desa, actualitza, i observa que els contenidors ocupen diverses columnes segons correspongui. Visca!

Les graelles CSS són bidimensionals, de manera que si el disseny creix o es redueix, els elements romanen alineats tant horitzontalment com verticalment.

Prova de substituir els darrers 4 elements <div> amb el següent:

<div class="col">13some<br>content</div>
<div class="col span6">14this<br>is<br>more<br>content</div>
<div class="col span3">15this<br>is<br>less</div>
<div class="col span2">16</div>

Aquí hem afegit deliberadament algunes etiquetes de salt de línia (<br>) per forçar que unes columnes siguin més altes que unes altres. Desa i actualitza, i observa que les columnes ajusten l'alçada a la mida del contenidor més alt, de manera que tot quedi polit i ordenat.

El disseny final presenta un aspecte semblant a això:

Nota: Si aquest exemple no et funciona, pots contrastar el codi amb el de la nostra versió acabada (observa'n també l’exemple en viu).

Altres avantatges de la graella CSS

Amb les graelles CSS, no cal empènyer les coses pels marges per a desplaçar-les. Prova de fer aquests canvis en el teu CSS:

.content {
  grid-column: 2 / 8;
}
<div class="col span2 content">16</div>

El contenidor 16 ara ocuparà les columnes 2 a 8, en la fila següent disponible en què pugui encaixar.

Podem ocupar les files amb la mateixa facilitat que les columnes:

.content {
  grid-column: 2 / 8;
  grid-row: 3 / 5;
}

El contenidor 16 ara ocuparà les files 3 a 5, i les columnes 2 a 8.

Tampoc cal usar un marge per a falsificar canals, ni calcular-ne les amplades de manera explícita; la graella CSS té aquesta funció integrada amb la propietat grid-gap.

Només hem gratat la superfície del que és possible amb el disseny de pàgines web amb graella CSS, però la idea clau que cal entendre en el context d'aquest article és que no cal que creïs un sistema de graella amb una graella, perquè ja n’hi ha un. Pots escriure CSS que col·loqui un element directament en una graella predefinida. És la primera vegada que és possible amb CSS, però es farà servir molt més quan es consolidi la compatibilitat amb els navegadors.

Aprenentatge actiu: Escriu la teva graella

En l'article Introducció al disseny CSS, hem inclòs una secció sobre taules CSS, que inclou un exemple de formulari senzill (consulta l'exemple css-tables-example.html en viu i el codi d’origen). Fes una còpia d'aquest exemple i a continuació:

  1. Suprimeix els elements <div> que hi ha dins del formulari ( <form>); ja no els necessites perquè les graelles CSS et permeten col·locar el contingut en files i columnes.
  2. Utilitza les propietats de la graella CSS per crear un disseny de formulari tan proper a l'original com et sigui possible. Hauràs d'establir una amplada en l'element contenidor i pensar com establir els espais de columna i els espais de fila.

Nota: Primer, intenta-ho tu, i si t’encalles, podeu contrastar el teu codi amb el nostre exemple css-tables-as-grid.html. No t’enganyis a tu mateix!

Resum

Després de la lectura d’aquest article, hauries de ser capaç d’entendre com funcionen els dissenys de pàgina web amb graella i els marcs amb graella CSS. També has fet un cop d'ull al futur de les graelles CSS i hauries d'entendre que els marcs de graella que utilitzem avui són bàsicament una solució provisional fins que tinguem una forma nadiua amb prou compatibilitat.