You are on the editable version of MDN Web Docs

View as an MDN Web Docs user: https://developer.mozilla.org/ca/docs/Learn/CSS/Disseny_CSS/Graelles

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).

Crear la teva graella en CSS

Després d'haver decidit la graella que necessita el vostre disseny, podeu utilitzar el disseny de graella (o grid) de CSS per crear aquesta quadrícula a CSS i col·locar-hi elements. Primer veurem les característiques bàsiques del disseny de quadrícula i després explorarem com crear un sistema de quadrícula simple per al vostre projecte.

Com a punt de partida, descarregueu i obriu el fitxer del punt de partida a l’editor de text i al navegador (també el podeu veure en directe aquí). Veureu un exemple amb un contenidor que conté alguns elements secundaris. Per defecte, es mostren en un flux normal, de manera que els quadres es mostren un sota l’altre. Treballarem amb aquest fitxer durant la primera part d’aquesta lliçó, fent canvis per veure com es comporta la quadrícula.

Per definir una graella utilitzem el valor grid de la propietat display. Com passa amb Flexbox, això activa el disseny de graella i tots els fills directes del contenidor es converteixen en elements de la quadrícula. Afegiu això al CSS del vostre fitxer:

.container {
    display: grid;
}

A diferència de flexbox, els articles no tindran cap aspecte immediatament diferent. Declarar display: grid  us dona una quadrícula d'una columna, de manera que els vostres articles continuaran mostrant-se un per sota de l'altre tal com ho fan en el flux normal.

Per veure alguna cosa que sembli més una graella, haurem d’afegir algunes columnes a la quadrícula. Afegim aquí tres columnes de 200 píxels. Podeu utilitzar qualsevol unitat de longitud o percentatges per crear aquestes pistes de columna.

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

Afegiu la segona declaració a la vostra regla CSS i, a continuació, torneu a carregar la pàgina i hauríeu de veure que els elements s'han reordenat un a cada cel·la de la quadrícula creada.

Graelles flexibles amb la unitat fr

A més de crear quadrícules amb longituds i percentatges, podem utilitzar la unitat fr per dimensionar de manera flexible les files i les columnes de la quadrícula. Aquesta unitat representa una fracció de l'espai disponible al contenidor de la quadrícula.

Canvieu el llistat de pistes a la següent definició, creant tres pistes d'1fr.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Ara hauríeu de veure que teniu pistes flexibles. La unitat fr distribueix espai proporcionalment, per tant, podeu donar diferents valors positius a les vostres pistes, per exemple, si canvieu la definició així:

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

La primera pista ara té 2fr de l’espai disponible i les altres dues pistes 1fr, fent que la primera pista sigui més gran. Podeu barrejar unitats de fr i pistes de longitud fixa; en aquest cas, l’espai necessari per a les pistes fixes s’elimina abans de distribuir l’espai a les altres pistes.

 

Nota: La unitat fr distribueix l'espai disponible, no tot l'espai. Per tant, si una de les vostres pistes té alguna cosa gran al seu interior, hi haurà menys espai lliure per compartir.

Espais entre pistes

Per crear espais entre pistes, fem servir les propietats grid-column-gap per a espais entre columnes, grid-row-gap per a espais entre files i grid-gap per establir tots dos alhora.

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
}

Aquests buits poden especificar-se en qualsevol unitat de longitud o percentatge, però no en unitats fr.

Nota: Les propietats *gap solien portar el prefix grid-, però això s'ha canviat a l'especificació, ja que la intenció és fer-les útils en diversos mètodes de disseny. Les versions prefixades es mantindran com a àlies, de manera que es podran utilitzar amb seguretat durant algun temps. Per estar segur, podeu duplicar i afegir les dues propietats per fer el vostre codi més a prova de bales.

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}

Repetició de llistes de pistes

Podeu repetir tot o una secció de la vostra llista de pistes mitjançant la notació de repetició. Canvieu la llista de pistes pel següent:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

Ara tindreu 3 pistes d’1fr igual que abans. El primer valor que es passa a la funció de repetició és el nombre de vegades que voleu que es repeteixi el llistat, mentre que el segon valor és un llistat de pistes, que consisteix d’una o més pistes que vulgueu repetir.

La quadrícula implícita i explícita

Fins ara, només hem especificat pistes de columnes i, tot i això, s’estan creant files per contenir el nostre contingut. Aquest és un exemple de la quadrícula explícita contra la quadrícula implícita. La quadrícula explícita és la que creeu utilitzant grid-template-columns o grid-template-rows. La quadrícula implícita es crea quan el contingut es col·loca fora d’aquesta, com ara a les nostres files. Les quadrícules explícites i implícites són anàlogues als eixos flexbox principal i transversal.

Per defecte, les pistes creades a la quadrícula implícita tenen una mida auto, cosa que en general vol dir que són prou grans per adaptar-se al seu contingut. Si voleu donar una mida implícita a les pistes de quadrícula, podeu utilitzar les propietats grid-auto-rows i grid-auto-columns. Si afegiu grid-auto-rows amb un valor de 100px al vostre CSS, veureu que aquestes files creades ara tenen una alçada de 100 píxels.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 20px;
}

La funció minmax()

Les nostres pistes de 100 píxels d’alçada no seran molt útils si afegim contingut a les pistes de més de 100 píxels, ja que aquest cas provocaria un desbordament. Podria ser millor tenir pistes de com a mínim 100 píxels d’alçada i que es puguin expandir si hi entra més contingut. Un fet bastant bàsic sobre el web és que mai no se sap realment la mida que tindrà alguna cosa; contingut addicional o mides de lletra més grans poden causar problemes amb els dissenys que intenten ser perfectes en píxels en totes les dimensions.

La funció minmax ens permet establir una mida mínima i màxima per a una pista, per exemple, minmax(100 px, auto). La mida mínima és de 100 píxels, però la màxima és automàtica, i s’ampliarà per adaptar-se al contingut. Proveu de canviar grid-auto-rows per utilitzar un valor min-max:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 20px;
}

Si afegiu contingut addicional, veureu que la pista s'expandeix per permetre que encaixi. Tingueu en compte que l'expansió es produeix al llarg de la fila.

Tantes columnes com encaixin

Podem combinar algunes de les coses que hem après sobre el llistat de pistes, la notació de repetició i minmax per crear un patró útil. De vegades, és útil poder demanar a la quadrícula que creï tantes columnes com càpiguen al contenidor. Ho fem establint el valor de grid-template-columns mitjançant la notació repeat}), però en lloc de passar un número, introduïu la paraula clau auto-fill. Per al segon paràmetre de la funció utilitzem minmax(), amb un valor mínim igual a la mida mínima de la pista que ens agradaria tenir i un màxim de 1fr.

Proveu-ho ara al vostre fitxer amb el CSS següent:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}

Això funciona perquè Grid crea tantes columnes de 200 píxels com càpiguen al contenidor i, a continuació, comparteix l’espai que sobri entre totes les columnes: el màxim és 1fr que, com ja sabem, distribueix l’espai de manera uniforme entre les pistes.

Ubicació basada en línies

Ara passem de crear una graella a col·locar coses a la quadrícula. La nostra quadrícula sempre té línies, que comencen per 1 i es relacionen amb el mode d’escriptura del document. Per tant, en anglès, la línia de columna 1 es troba a la part esquerra de la quadrícula i la línia de fila 1 a la part superior. En àrab, la línia 1 de la columna estaria a la dreta, ja que l'àrab s'escriu de dreta a esquerra.

Podem situar les coses segons aquestes línies especificant la línia inicial i final. Ho fem utilitzant les propietats següents:

Totes aquestes propietats poden tenir un número de línia com a valor. També podeu utilitzar les propietats abreujades:

    grid-column
    grid-row

Aquests us permeten especificar les línies inicial i final alhora, separades per un /, un caràcter de barra inclinada cap endavant.

Descarregueu aquest fitxer com a punt de partida o vegeu-lo en directe aquí. Ja té una quadrícula definida i article senzill. Podeu veure que la col·locació automàtica col·loca elements un a cada cel·la de la quadrícula que hem creat.

En lloc d'això, col·locarem tots els elements del nostre lloc a la quadrícula, mitjançant les línies de la quadrícula. Afegiu les regles següents a la part inferior del vostre CSS:

header {
  grid-column: 1 / 3;
  grid-row: 1;
}

article {
  grid-column: 2;
  grid-row: 2;
}

aside {
  grid-column: 1;
  grid-row: 2;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3;
}

Nota: també podeu utilitzar el valor -1 per referir-vos a la columna o la línia final i comptar cap a l'interior des del final mitjançant valors negatius. Tanmateix, això només funciona per a la quadrícula explícita. El valor -1 no es referirà a la línia final de la quadrícula implícita.

Posicionament amb grid-template-areas

Una forma alternativa de col·locar elements a la quadrícula és fer servir la propietat grid-template-areas i donar un nom als diversos elements del vostre disseny.

Traieu el posicionament basat en línies de l'últim exemple (o torneu a descarregar el fitxer per tenir un punt de partida nou) i afegiu el CSS següent.

.container {
  display: grid;
  grid-template-areas: 
      "header header"
      "sidebar content"
      "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}

Torneu a carregar la pàgina i veureu que els vostres articles s'han col·locat igual que abans, sense que hàgim d'utilitzar cap número de línia!

Les regles per a les grid-template-areas són les següents:

  • Cal que ompliu totes les cel·les de la graella.
  • Per abastar dues cel·les, repetiu el nom.
  • Per deixar una cel·la buida, utilitzeu un . (punt).
  • Les àrees han de ser rectangulars; per exemple, no es pot tenir una àrea en L.
  • Les àrees no es poden repetir en ubicacions diferents.

Podeu jugar amb el nostre disseny canviant el peu de pàgina per situar-se només a sota del contingut i la barra lateral, per exemple, per abastar fins a baix de tot. Aquesta és una manera molt agradable de descriure un disseny, ja que és obvi a partir del CSS exactament el que està passant.

Un framework de graella amb CSS Grid

Els "frameworks" de quadrícula tendeixen a basar-se al voltant de 12 o 16 quadrícules i, amb CSS Grid, no necessiteu cap eina de tercers que us proporcioni aquest framework: ja hi és, a l’especificació.

Descarregueu el fitxer de punt de partida. Conté un contenidor amb una quadrícula de 12 columnes definida i el mateix marcatge que hem utilitzat en els dos exemples anteriors. Ara podem utilitzar la ubicació basada en línies per col·locar el nostre contingut a la quadrícula de 12 columnes.

header {
  grid-column: 1 / 13;
  grid-row: 1;
}

article {
  grid-column: 4 / 13;
  grid-row: 2;
}

aside {
  grid-column: 1 / 4;
  grid-row: 2;
}

footer {
  grid-column: 1 / 13;
  grid-row: 3;
}

Si feu servir el Firefox Grid Inspector per superposar les línies de quadrícula del vostre disseny, podreu veure com funciona la nostra quadrícula de 12 columnes.

Posa a prova els teus coneixements

Hem arribat al final de l'article. Recordes la informació més rellevant? Trobaràs més proves per comprovar si retens aquesta informació abans de seguir a Test your skills: Grids.

Resum

Després de la lectura d’aquest article, hauries de ser capaç d’entendre com funcionen els dissenys de pàgina web amb CSS Grid. Per aprofundir en l'especificació, llegeix les nostres guies sobre Disposició amb Grid, que trobaràs a continuació.

Veieu també

Document Tags and Contributors

Contributors to this page: UOCccorcoles, editorUOC, mdnwebdocs-bot, Legioinvicta
Last updated by: UOCccorcoles,