This translation is incomplete. Please help translate this article from English.

Les graelles són una eina de disseny establerta, i molts dissenys web moderns es basen en una graella regular. En aquest article, analitzarem el disseny basat en la graella i com es pot utilitzar CSS per crear graelles, tant amb les eines actuals com amb les noves tecnologies que comencen a estar disponibles en els navegadors.

Requisits previs: Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS i Styling boxes.)
Objectiu: Comprendre els conceptes fonamentals darrere dels sistemes de disseny de graella i com implementar un disseny de graella en una pàgina web.

Què és el disseny de graella?

Una graella és simplement una col·lecció de línies horitzontals i verticals creant un patró contra el qual podem alinear els nostres elements de disseny. Ens ajuden a crear dissenys on els elements no es mouen o canvien d'ample a mesura que passem de pàgina a pàgina, proporcionant una major coherència als nostres llocs web.

Normalment, una graella tindrà columnes (columns), files (rows) i espais entre cada fila i columna, normalment denominats canals (gutters).

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

Nota: Pot semblar sorprenent a qualsevol que vingui amb uns fonaments en disseny CSS, que no tingui un sistema de graella incorporat, sinó que estem utilitzant diversos mètodes subòptims per crear dissenys similars a la graella. Com esbrinareu a la darrera part d'aquest article, això està canviant, però és probable que hàgiu de conèixer els mètodes existents de creació de graelles durant algun temps.

Utilitzar un "sistema de graella" en els vostres projectes

Per assegurar una experiència coherent al vostre lloc o aplicació, basant-se en un sistema de graella des del principi, no cal pensar en l'amplitud d'un determinat element en relació amb els altres elements. La vostra elecció es limita a "quantes columnes de la graella aquest element abastarà".

El vostre "sistema de graella" podria ser simplement una decisió presa en el procés de disseny per utilitzar una graella regular. Si els vostres dissenys comencen a viure en una aplicació d'edició de gràfics com Photoshop, podeu crear una graella per fer referència durant aquest procés, tal 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) - ja sigui de tercers o creat per vosaltres només per al vostre projecte - que utilitzeu per aplicar la graella mitjançant CSS.

Creació de marcs (frameworks) de graella senzills

Començarem per veure com podeu crear un marc de graella senzill per al vostre projecte.

Actualment, la majoria dels dissenys de tipus de graella es creen amb flotadors. Si heu llegit el nostre article anterior sobre flotadors, ja heu vist com podem utilitzar aquesta tècnica per crear un disseny de columnes múltiples  - que és l'essència de qualsevol sistema de graella que utilitzi aquest mètode.

El tipus més senzill, per crear un marc de graella, és un d'amplada fixa - només necessitem resoldre l'amplada total que volem que sigui el nostre disseny, quantes columnes volem i quines dimensions han de ser les canals i les columnes. Si, en canvi, decidim dissenyar el nostre disseny en una graella amb columnes que creixen i s'encongeixen d'acord amb l'amplada del navegador, caldria calcular l'amplada de percentatge de les columnes i les canals entre elles.

A les seccions següents veurem com crear ambdues. Crearem una graella de 12 columnes - una elecció molt comuna que es pot veure molt adaptable a les diferents situacions, ja que 12 és divisible per 6, 4, 3 i 2.

Una senzilla graella d'amplada fixa

Permet primer crear un sistema de graella que utilitzi columnes d'amplada fixa.

Comenceu fent una còpia local del nostre fitxer exemple simple-grid.html, que conté el següent marcat en el seu cos.

<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 convertir-ho en una graella de demostració de dues files en una graella de dotze columnes - la fila superior mostra la mida de les columnes individuals, la segona fila, algunes àrees de mida diferent en la graella.

En l'element <style>, afegiu el codi següent, primer fer que tots els elements de la pàgina siguin de tamany com caixes vora i, a continuació, proporcionar al contenidor un ample de 980 píxels, amb un farciment al costat dret de 20 píxels. Això ens deixa amb 960 píxels per a la nostra amplada de columna/canal total.

* {
  box-sizing: border-box;
}
    

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

.wrapper {
  padding-right: 20px;
}

Ara utilitzeu el contenidor de fila que s'embolica al voltant de cada fila de la graella per esborrar una fila d'una altra. Afegiu la següent regla sota de l'anterior:

.row {
  clear: both;
}

L'aplicació d'aquesta neteja significa que no necessitem omplir completament cada fila amb elements que forman les dotze columnes completes. Les files es mantindran separades i no interferiran entre elles.

Els canals entre les columnes tenen 20 píxels d'ample. Creem aquests canals com un marge a la part esquerra de cada columna - inclosa la primera columna, per equilibrar els 20 píxels del farciment al costat dret del contenidor. Així, tenim 12 canals en total - 12 x 20 = 240.

Necessitem restar això de la nostra amplària total de 960 píxels, donant-nos 720 píxels per a les nostres columnes. Si ara dividim aixó per 12, sabem que cada columna ha de tenir 60 píxels d'amplada.

El següent pas és crear una regla per a la classe .col, flotant-la cap a l'esquerra, donant-li un margin-left de 20 píxels per formar el canal i un width de 60 píxels. Afegiu la següent regla al final del vostre CSS:

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

La fila superior de columnes individuals ara es disposaran eficientment com una graella.

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

Els contenidors de disseny que volen abastar més d'una columna han de rebre classes especials per ajustar els valors width al nombre necessari de columnes (més els canals entre ells). Hem de crear una classe addicional per permetre que els contenidors abastin de 2 a 12 columnes. Cada amplada és el resultat de sumar l'amplada de la columna d'aquest nombre de columnes, més l'amplada del canal, que sempre numerarà un menys que el nombre de columnes.

Afegiu el següent a la part inferior del vostre CSS:

/* 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 aquestes classes creades, ara podem disposar de columnes de diferents amples en la graella. Intenteu guardar i carregar la pàgina al vostre navegador per veure els efectes..

Nota: Si teniu problemes per a que funcioni l'exemple anterior, intenteu comparar-lo amb la nostra versió final a GitHub (vegeu-la en execució en directe, també).

Intenteu modificar les classes dels vostres elements o, fins i tot, afegir i treure alguns contenidors, per veure com pot variar el disseny. Per exemple, podrieu fer que la segona fila se sembli a aixó:

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

Ara teniu funcionant un sistema de graella, podeu definir les 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é un ample fix. Realment volem una graella flexible (fluida) que creixi i s'encongeixi amb l'espai disponible del navegador viewport. Per aconseguir-ho, podem utilitzar les amplàries de píxels de referència i convertir-los en percentatges.

L'equació que converteix un ample fix en un flexible basat en un percentatge és com segueix.

target / context = result

Per al nostre ample de columna, el nostre ample de destinació és de 60 píxels i el nostre context és el embolcall de 960 píxels. Podem utilitzar el següent per calcular un percentatge.

60 / 960 = 0.0625

A continuació, mouren el punt decimal 2 llocs donant-nos un percentatge del 6,25%. Així, en el nostre CSS podem reemplaçar l'ample de la columna de 60 píxels amb un 6.25%.

Hem de fer el mateix amb l'amplada de la canal:

20 / 960 = 0.02083333333

Per tant, hem de reemplaçar els 20 píxels margin-left a la nostra regla .col i els 20 píxels padding-right en .wrapper amb 2.08333333%.

Actualitzar la nostra graella

Per començar en aquesta secció, feu una nova còpia de la vostra pàgina d'exemple anterior o feu una còpia local del nostre codi simple-grid-finished.html per utilitzar-lo com a punt de partida.

Actualitzeu 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 width, també hem afegit una propietat max-width per evitar que el disseny sigui massa ampla.

A continuació, actualitzeu la quarta regla CSS (amb el selector .col) igual que:

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

Ara ve la part una mica més laboriosa - necessitem actualitzar totes les nostres regles .col.span per utilitzar percentatges en lloc d'amplades de píxels. Això triga una mica de temps amb una calculadora; Per estalviar-vos un esforç, ho hem fet per vosaltres a continuació.

Actualitzeu el bloc inferior de les regles CSS amb el 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 deseu el vostre codi, carregueu-lo en un navegador i proveu de canviar l'amplada de la finestra de visualització - heu de veure els ample de les columnes ajustar-se bé. Genial!

Note:  Si teniu problemes per a que funcioni l'exemple anterior, intenteu comparar-lo amb la nostra versió final acabada a GitHub (vegeu-la en execució en directe també).

Càlculs més fàcils amb la funció calc()

Podeu utilitzar la funció calc () per fer la matemàtica directament dins del vostre CSS - això us permet inserir equacions matemàtiques senzilles en els vostres valors de CSS, per calcular el valor que ha de ser. És especialment útil quan es fa una matemàtica complexa i fins i tot es pot calcular un càlcul que utilitza unitats diferents, per exemple "Vull que l'alçada d'aquest element sigui sempre al 100% de l'alçada dels seus pares, menys 50px". Vegeu aquest exemple des d'un tutorial de l'API de MediaRecorder.

De totes maneres, tornem a les nostres graelles! Qualsevol columna que abasti més d'una columna de la nostra graella té un ample total del 6,25%, que multipliquen pel nombre de columnes abastades, i li vam sumar el 2.08333333%, que multipliquem per el nombre de canals (que sempre seran 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 per a qualsevol element que abasti 4 columnes podem fer això, per exemple:

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

Proveu de substituir el vostre bloc inferior de regles amb el següent, i torneu a carregar-lo en el navegador per veure si obté el mateix 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:  Podeu veure la nostra versió acabada a fluid-grid-calc.html (també veure-la en directe).

Nota: Si no podeu fer que funcioni, pot ser que el vostre navegador no sigui compatible amb la funció calc(), tot i que és prou compatible amb els navegadors - tan lluny com IE9.

Sistemes de graella semàntica versus "no semàntica"

Afegir classes al vostre marcat per definir el disseny, significa que el vostre contingut i marcat es vincula a la seva presentació visual. En ocasions escoltareu aquest ús de les classes CSS descrites com a "no semoàntiques" - que descriuen com es veu el contingut - en lloc d'un ús semàntic de les classes que descriuen el contingut. Aquest és el cas amb les nostres classes span2, span3, etc.

Aquests no són l'únic enfocament. En lloc d'això, podeu decidir sobre la vostra graella i, a continuació, afegir la informació de mida a les regles de les classes semàntiques existents. Per exemple, si teníeu un <div> amb una classe de contingut que volieu abastar 8 columnes, podríeu copiar a través de l'amplada de la classe span8, donant-li una regla com aquesta:

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

Nota: Si uséssiu un preprocesador com Sass, podríeu crear un mixin simple per inserir aquest valor per a vosaltres.

Habilitar el desplaçament de contenidors en la graella

La graella que hem creat funciona bé sempre i quan vulguem iniciar tots els contenidors arres, amb la part esquerra de la graella. Si volíem deixar un espai buit en la columna abans del primer contenidor - o entre contenidors - caldria crear una classe de desplaçament per afegir un marge esquerre al nostre lloc per empènyer-ho visualment a través de la graella. Més matemàtiques!

Anem a provar-ho.

Comenceu amb el vostre codi anterior o utilitzeu el nostre fitxer fluid-grid.html com a punt de partida.

Fem una classe en el nostre CSS que desplaçarà un element contenidor en un ample de columna. Afegiu el següent a la part inferior del vostre CSS:

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

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

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

Ara podeu afegir aquesta classe a qualsevol contenidor que volgueu deixar un espai buit d'una columna a l'esquerra de la mateixa. Per exemple, si teniu això al vostre HTML:

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

Proveu de substituir-lo per

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

Nota: Tingueu en compte que necessiteu reduir el nombre de columnes abastades, per deixar espai al desplaçament!

Intenteu carregar-lo i actualitzar-lo per veure la diferència, o consulteu el nostre exemple fluid-grid-offset.html (vegeu-lo en execució en directe també). L'exemple acabat hauria de ser així:

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

Limitacions de la graella flotant

Quan utilitzeu un sistema com aquest, heu de tenir cura que la amplada total s'afegeixi correctament, i que no incloguin elements en una fila que abastin més columnes que la que conté la fila. A causa de la manera en què els flotadors funcionen, si el nombre de columnes de la graella es fa massa ample per la graella, els elements del final es despleguen fins a la següent línia, trencant la graella.

També tingueu en compte que si el contingut dels elements és més ampli que les files que ocupen, es desbordarà i semblarà un embolic.

La major limitació d'aquest sistema és que és essencialment unidimensional. Es tracta de columnes i d'elements que abasten columnes, però no de files. És molt difícil que aquests mètodes de disseny més antics controlin l'alçada dels elements sense establir explícitament una alçada, i això també és un enfocament molt inflexible - només funciona si podeu garantir que el vostre contingut tingui una alçada determinada.

Graelles Flexbox?

Si llegiu el nostre article anterior sobre flexbox, podrieu pensar que flexbox és la solució ideal per crear un sistema de graella. Actualment hi ha disponible una sèrie de sistemes de graella basats en flexbox en el qual flexbox pot resoldre molts dels problemes que ja hem descobert en crear la nostra graella anterior.

No obstant això, flexbox mai es va dissenyar com un sistema de graella i planteja un nou conjunt de desafiaments quan s'utilitza com un solament. Com a exemple senzill d'això, podem fer el mateix marcat d'exemple que hem utilitzat anteriorment i utilitzar el següent CSS per a l'estil de les classes d'embolcall, fila i columna:

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);
}

Podeu provar de fer aquests reemplaçaments en el vostre propi exemple o consulteu el nostre codi d'exemple flexbox-grid.html example code (vegeu-lo executar en directe també).

Aquí estem convertint cada fila en un contenidor flexible. Amb una graella basada en flexbox, encara necessitem les files amb la finalitat de permetre'ns tenir elements que sumen menys de 100%. Hem configurat aquest contenidor amb 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é un width establert, auto utilitzarà aquest ample com a valor de flex-basis.

A la línia superior, obtenim dotze caixes ordenades a la graella i creixen i s'encogeixen per igual mentre canviem l'ample de la finestre de visulització. En la següent línia, però, només tenim quatre elements i aquests també creixen i s'encogeixen a partir d'aquesta base de 60 píxels. Amb només quatre d'ells poden créixer molt més que els elements de la fila anterior, el resultat és que tots ocupen el mateix ample en la segona fila.

Per arreglar-ho, encara hem d'incloure les nostres classes span per proporcionar un ample que substituirà el valor utilitzat per flex-basis per a aquest element.

També no respecten la graella utilitzada pels elements anteriors perquè no saben res d'això.

Flexbox és unidimensional per disseny. Es tracta d'una única dimensió, la d'una fila o una columna. No podem crear una graella estricte per a columnes i files, és a dir, si fem servir flexbox per a la nostra graella, encara hem de calcular percentatges com per el disseny flotat.

En el vostre projecte, encara podeu optar per utilitzar una 'graella' flexbox a causa de l'alineació addicional i les capacitats de distribució d'espai que proporciona flexbox a través de flotadors. Tanmateix, haureu de tenir en compte que encara utilitzeu una eina per a alguna cosa diferent per la qual va ser dissenyada. Així que us pot semblar que esteu saltan per altres camins per obtenir el resultat final que desitgeu.

Sistemes de graella de tercers

Ara que entenem les matemàtiques darrere dels nostres càlculs de graella, estem en un bon lloc per veure alguns dels sistemes de graelles de tercers d'ús comú. Si cerqueu "CSS Grid framework" a la web, trobareu una gran llista d'opcions per triar. Marcs populars com Bootstrap i Foundation, inclouen un sistema de graella. També hi ha sistemes de graella independents, ja sigui desenvolupats utilitzant CSS o utilitzant preprocessadors.

Fem un cop d'ull a un d'aquests sistemes independents ja que demostra tècniques comunes per treballar amb un marc de graella. La graella que utilitzarem forma part de Skeleton, un marc CSS senzill.

Per començar, visiteu Skeleton website, i seleccioneu "Baixar" per descarregar el fitxer ZIP. Descomprimiu aquest i copieu els fitxers skeleton.css i normalize.css en un nou directori.

Feu una còpia del fitxer html-skeleton.html i deseu-lo al mateix directori que skeleton i normalize CSS.

Incloeu skeleton i normalize CSS a la pàgina HTML, afegint el següent al cap:

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

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

Nota: Normalize és una petita biblioteca CSS molt útil, escrita per Nicolas Gallagher, que automàticament realitza algunes solucions útils de disseny bàsic i fa que l'estil de l'element predeterminat sigui més consistent en tots els navegadors.

Utilitzarem HTML similar al nostre exemple anterior. Afegiu el següent en el cos del vostre HTML:

<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 hem de donar al contenidor <div> una classe container - això ja està inclòs en el nostre HTML. Centra el contingut amb un ample màxim de 960 píxels. Podeu veure com les caixes mai no arriben a ser més amples que 960 píxels.

Podeu fer una ullada al fitxer skeleton.css per veure el CSS que s'utilitza quan s'aplica aquesta classe. El <div> està centrat mitjançant auto per els marges esquerra i dreta, i s'aplica un farciment de 20 píxels a l'esquerra i a la dreta. Skeleton també estableix la propietat box-sizing a border-box com ho vam fer anteriorment, de manera que el farciment i les vores d'aquest element s'inclouran en l'amplada total.

.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 grealla si estan dins d'una fila, de manera que, així com amb el nostre exemple anterior, necessitem un <div> o altre element addicional amb una classe row niada entre el content <div> i el nostre contenidor de contingut real <div>s. Hem fet això ja.

Ara dissenyarem les caixes del contenidor. Skeleton es basa en una graella de 12 columnes. Les caixes de línia superior necessiten la classe one column per fer-les abastar una columna.

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

<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ó, assigneu els contenidors, en la classe, a partir de la segona fila que expliquin el nombre de columnes que han d'abastar, 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>

Intenteu guardar el vostre fitxer HTML i carregar-lo al vostre navegador per veure l'efecte.

Nota: Si teniu problemes per a que funcioni aquest exemple, proveu de comparar-lo amb el nostre fitxer html-skeleton-finished.html (vegeu-lo en execució en directe també).

Si observeu el fitxer skeleton.css, podeu veure com funciona aquest. 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) el que fa és configurar classes predefinides que podeu utilitzar afegint-les al vostre marcat. És exactament el mateix que si féssiu el treball de calcular aquests percentatges vosaltres.

Com podeu veure, hem d'escriure molt poc CSS quan utilitzem Skeleton. Tracta tot el flotant per a nosaltres quan afegim classes al nostre marcat. Aquesta capacitat de responsabilitzar-se de la distribució d'alguna cosa més, fa que l'ús d'un marc, per a un sistema de graelles sigui una elecció convincent!

Skeleton és un sistema de graella més senzill que alguns dels marcs que pogueu trobar. Les graelles, en grans marcs, com Bootstrap i Foundation ofereixen més funcionalitats i punts d'interrupció addicionals per a diversos amples de pantalla. Tanmateix, tots funcionen de manera similar - afegint classes específiques al vostre marcat podeu controlar com es col.loca l'element mitjançant la graella predefinida.

Native CSS Grids with Grid Layout

Vam dir al principi d'aquest article que CSS no tenia prèviament un sistema real per crear dissenys de graelles, però això canviarà. Tot i que encara no podem utilitzar un sistema de graelles CSS natives, l'any vinent hauríem de veure compatibilitat amb el navegador per al Mòdul de Disseny de Graella CSS.

Actualment, només podeu utilitzar la tècnica que us mostrarem en els navegadors que implementen el disseny de graella CSS "darrere d'una bandera" - el que significa que està implementat actualment, però en un estat experimental que necessiteu canviar per utilitzar.

A Firefox, per exemple, heu de navegar a una URL about:config, cerqueu les preferència layout.css.grid.enabled i feu doble clic per habilitar les graelles CSS. Podeu esbrinar com utilitzar-lo en altres navegadors visitant Grid by Example.

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 <div>s per formar files i a continuació especificar el nombre de columnes que els elements d'aquestes files abastaran.  

Amb el Disseny de Graella CSS, podeu especificar la vostra graella completament en CSS, sense necessitat d'afegir totes aquestes classes d'ajuda al marcatge. Prenguem el nostre senzill exemple i vegem com crearíem aquest mateix disseny utilitzant el Disseny de Graella CSS.

Construir una graella nativa

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 tenim un <div> pare amb una classe wrapper i, a continuació, tots els elements fills apareixen directament a l'interior de l'embolcall, sense elements de fila. Hem afegit una classe als elements que han d'abastar més d'una columna.

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

.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 .wrapper, de manera que sigui el 90% de l'amplada del cos, centrada i té un max-width de 960px.

Ara, per a les propietats de la graella CSS. Podem declarar una graella utilitzant el valor grid de la propietat display, configurar una canal amb la propietat grid-gap i després crear una graella de 12 columnes d'igual amplada utilitzant grid-template-columns, la nova funció repeat() i una nova unitat definida per al disseny de graella - la unitat fr.

La unitat fr és una unitat de fracció - descriu una fracció de l'espai disponible en el contenidor de la graella. Si totes les columnes són 1fr, cada una tindrà una quantitat igual d'espai. Això elimina la necessitat de calcular percentatges per crear una graella flexible.

Després d'haver creat una graella, les regles col·locació automàtica de la graella mostraran immediatament les nostres caixes en aquesta graella i obtindrem un disseny de graella flexible de dotze columnes.

Per dissenyar els contenidors que abasten diverses pistes de columnes a la graella, podem utilitzar la propietat grid-column. Per abastar 6 columnes per exemple:

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

Per abastar 3:

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

El valor abans de la barra inclinada és la línia d'inici - en aquest cas no estem definint explícitament això i permetent que el navegador col·loqui l'element a la següent línia disponible. A continuació, lo que podem fer, es establir que abasti 6, 3 o moltes més línies que desitgem.

Afegiu el següent a la part inferior del vostre CSS:

.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;}

Intenteu desar i actualitzar, i veureu que els contenidors abasten diverses columnes segons correspongui. Guai!

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

Podeu provar-ho substituint els darrers 4 col <div>s 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í, deliberadament, hem afegit algunes etiquetes de salt de línia (<br>) per forçar a algunes de les columnes a ser més altes que altres. Si intenteu desar-lo i actualitzar-lo, veureu que les columnes ajusten l'alçada per ser tan alta com el contenidor més alt, de manera que tot quedi nítid i ordenat.

El disseny final sembla així:

Nota: Si teniu problemes perquè aquest exemple funcioni, podeu comprovar el vostre codi en funció de la nostra versió acabada (vegeu-lo també executat en directe).

Altres bones característiques de la graella CSS

Amb les graelles CSS, no necessitem empènyer les coses al llarg dels marges per desplaçar-les. Proveu de fer aquests canvis al vostre CSS:

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

El contenidor 16 ara abastarà les columnes 2 a 8, a la següent fila disponible on pugui encaixar.

Podem abastar files amb la mateixa facilitat que les columnes:

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

El contenidor 16 ara abastarà les files 3 a 5, així com les columnes 2 a 8.

Tampoc necessitem usar un marge per falsificar canals o calcular els seus amples de forma explícita - la graella CSS té aquesta funcionalitat integrada amb la propietat grid-gap.

Només estem tocant la superfície del que és possible amb el Disseny de Graella CSS, però la clau que cal entendre en el context d'aquest article és que no cal crear un sistema de graella amb una graella - és un. Podeu escriure CSS que col·loqui un element directament en una graella predefinida. Aquesta és la primera vegada que ha estat possible amb CSS, i això es farà servir molt més quan es solidifique el suport en el navegador.

Aprenentatge actiu: Escriviu la vostra pròpia graella simple

A l'article Introducció al disseny CSS, vam incloure una secció sobre taules CSS, que incloïa un exemple de formulari senzill (vegeu l'exemple css-tables-example.html en viu i el codi font). Ens agradaria que fessiu una còpia d'aquest exemple i fessiu el següent:

  1. Suprimiu els elements <div> dins de <form> - ja no els necessiteu, ja que les graelles CSS poden encarregar-se de col·locar el contingut en files i columnes per vosaltres.
  2. Utilitzeu les propietats de la graella CSS per crear un disseny per al formulari el més a prop possible de l'original. Haureu d'establir un ample en l'element que conté i pensar en com establir espais de columna així com espais de files.

Nota: Proveu a fer això primer, i si us quedeu realment atrapats, podeu consultar el vostre codi contra el nostre exemple css-tables-as-grid.html No us enganyeu - proveu l'exercici primer!

Resum

Després d'haver llegit aquest article, ara hauríeu d'entendre com funcionen els dissenys de graella i els marcs de graella CSS. També heu fet un cop d'ull al futur de les graelles CSS i hauríeu d'entendre que els marcs de graelles que utilitzem avui són bàsicament una solució provisional fins que tinguem una forma nativa àmpliament compatible per aconseguir-ho en CSS.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,