path: root/files/ca/learn/css/disseny_css/graelles/index.html

---
title: Graelles (Grids)
slug: Learn/CSS/Disseny_CSS/Graelles
tags:
  - Article
  - Beginner
  - CSS
  - CSS Grids
  - CodingScripting
  - Grids
  - Guide
  - Layout
  - Learn
  - Tutorial
  - grid design
  - grid framework
  - grid system
translation_of: Learn/CSS/CSS_layout/Grids
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Assessment", "Learn/CSS/CSS_layout")}}</div>

<p class="summary">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.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisits:</th>
   <td><span id="result_box" lang="ca">Conceptes bàsics d'HTML</span> (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a HTML</a>), <span id="result_box" lang="ca">i nocions de com funciona el CSS</span> (consulta la <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a> i <a href="/ca/docs/Learn/CSS/Building_blocks">Aplicar estil a les caixes</a>.)</td>
  </tr>
  <tr>
   <th scope="row">Objectiu:</th>
   <td>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.</td>
  </tr>
 </tbody>
</table>

<h2 id="Què_és_el_disseny_de_pàgines_web_basat_en_graella">Què és el disseny de pàgines web basat en graella?</h2>

<p>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.</p>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p>

<h2 id="Crear_la_teva_graella_en_CSS">Crear la teva graella en CSS</h2>

<p>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.</p>

<p>Com a punt de partida, descarregueu i obriu el <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">fitxer del punt de partida</a> a l’editor de text i al navegador (també el podeu <a href="https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html">veure en directe aquí</a>). 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.</p>

<p>Per definir una graella utilitzem el valor <code>grid</code> de la propietat <code>display</code>. 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:</p>

<pre class="brush: css notranslate">.container {
    display: grid;
}</pre>

<p>A diferència de flexbox, els articles no tindran cap aspecte immediatament diferent. Declarar <code>display: grid</code>  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.</p>

<p>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.</p>

<pre class="brush: css notranslate">.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}</pre>

<p><span id="docs-internal-guid-c80e169c-7fff-1a9b-8e08-9626ee0cc209" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">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.</span></p>

<div id="Grid_1">
<div class="hidden">
<h6 id="Simple_Grid_Example">Simple Grid Example</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container &gt; div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}          </pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
 &lt;div&gt;One&lt;/div&gt;
 &lt;div&gt;Two&lt;/div&gt;
 &lt;div&gt;Three&lt;/div&gt;
 &lt;div&gt;Four&lt;/div&gt;
 &lt;div&gt;Five&lt;/div&gt;
 &lt;div&gt;Six&lt;/div&gt;
 &lt;div&gt;Seven&lt;/div&gt;
&lt;/div&gt; </pre>

<pre class="brush: css notranslate">.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
} </pre>
</div>
</div>

<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p>

<h3 id="Graelles_flexibles_amb_la_unitat_fr">Graelles flexibles amb la unitat fr</h3>

<p>A més de crear quadrícules amb longituds i percentatges, podem utilitzar la unitat <code>fr</code> 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.</p>

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

<pre class="brush: css notranslate">.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}</pre>

<p><span id="docs-internal-guid-b7563581-7fff-e1f8-a099-a9ce28505b44" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Ara hauríeu de veure que teniu pistes flexibles. La unitat <code>fr</code> distribueix espai proporcionalment, per tant, podeu donar diferents valors positius a les vostres pistes, per exemple, si canvieu la definició així:</span></p>

<pre class="brush: css notranslate">.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}</pre>

<p><span id="docs-internal-guid-bbc2b6b9-7fff-d5ec-cd85-f7dc19208069" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">La primera pista ara té <code>2fr</code> de l’espai disponible i les altres dues pistes <code>1fr</code>, 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.</span></p>

<p>
 </p><div id="Grid_2">
 <div class="hidden">
 <h6 id="Simple_Grid_Example_with_fr_units">Simple Grid Example with fr units</h6>

 <pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

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

.container &gt; div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}
                </pre>

 <pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;div&gt;One&lt;/div&gt;
  &lt;div&gt;Two&lt;/div&gt;
  &lt;div&gt;Three&lt;/div&gt;
  &lt;div&gt;Four&lt;/div&gt;
  &lt;div&gt;Five&lt;/div&gt;
  &lt;div&gt;Six&lt;/div&gt;
  &lt;div&gt;Seven&lt;/div&gt;
&lt;/div&gt;                        </pre>
 </div>
 </div>


<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p>

<div class="blockIndicator note">
<p><strong>Nota:</strong> La unitat <code>fr</code> distribueix l'espai <em>disponible</em>, no <em>tot </em>l'espai. Per tant, si una de les vostres pistes té alguna cosa gran al seu interior, hi haurà menys espai lliure per compartir.</p>
</div>

<h3 id="Espais_entre_pistes">Espais entre pistes</h3>

<p>Per crear espais entre pistes, fem servir les propietats {{cssxref ("grid-column-gap")}} per a espais entre columnes, {{cssxref ("grid-row-gap")}} per a espais entre files i {{ cssxref ("grid-gap")}} per establir tots dos alhora.</p>

<pre class="brush: css notranslate">.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
}</pre>

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

<div id="Grid_3">
<div class="hidden">
<h6 id="Simple_Grid_Example_with_fr_units_2">Simple Grid Example with fr units</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

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

.container &gt; div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}
                </pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;div&gt;One&lt;/div&gt;
  &lt;div&gt;Two&lt;/div&gt;
  &lt;div&gt;Three&lt;/div&gt;
  &lt;div&gt;Four&lt;/div&gt;
  &lt;div&gt;Five&lt;/div&gt;
  &lt;div&gt;Six&lt;/div&gt;
  &lt;div&gt;Seven&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>

<p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p>

<div class="blockIndicator note">
<p><strong>Nota:</strong> Les propietats <code>*gap</code> solien portar el prefix <code>grid-</code>, 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.</p>
</div>

<pre class="brush: css notranslate">.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}</pre>

<h3 id="Repetició_de_llistes_de_pistes">Repetició de llistes de pistes</h3>

<p>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:</p>

<pre class="brush: css notranslate">.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}</pre>

<p>Ara tindreu 3 pistes d’<code>1fr</code> 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.</p>

<h3 id="La_quadrícula_implícita_i_explícita">La quadrícula implícita i explícita</h3>

<p>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 <code>grid-template-columns</code> o <code>grid-template-rows</code>. 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.</p>

<p>Per defecte, les pistes creades a la quadrícula implícita tenen una mida <code>auto</code>, 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 {{cssxref ("grid-auto-rows")}} i {{cssxref ("grid-auto-columns")}}. Si afegiu <code>grid-auto-rows</code> amb un valor de 100px al vostre CSS, veureu que aquestes files creades ara tenen una alçada de 100 píxels.</p>

<div id="Grid_4">
<div class="hidden">
<h6 id="Simple_Grid_Example_with_fr_units_3">Simple Grid Example with fr units</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container &gt; div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}                  </pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;div&gt;One&lt;/div&gt;
  &lt;div&gt;Two&lt;/div&gt;
  &lt;div&gt;Three&lt;/div&gt;
  &lt;div&gt;Four&lt;/div&gt;
  &lt;div&gt;Five&lt;/div&gt;
  &lt;div&gt;Six&lt;/div&gt;
  &lt;div&gt;Seven&lt;/div&gt;
&lt;/div&gt;
                        </pre>
</div>

<pre class="brush: css notranslate">.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 20px;
}</pre>

<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p>

<h3 id="La_funció_minmax">La funció minmax()</h3>

<p>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 <em>com a mínim</em> 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.</p>

<p>La funció {{cssxref ("minmax")}} ens permet establir una mida mínima i màxima per a una pista, per exemple, <code>minmax(100 px, auto)</code>. 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 <code>grid-auto-rows</code> per utilitzar un valor min-max:</p>

<pre class="brush: css notranslate">.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 20px;
}</pre>

<p>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.</p>

<h3 id="Tantes_columnes_com_encaixin">Tantes columnes com encaixin</h3>

<p>Podem combinar algunes de les coses que hem après sobre el llistat de pistes, la notació de repetició i {{cssxref ("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 <code>grid-template-columns</code> mitjançant la notació {{cssxref ("repeat")}}}), però en lloc de passar un número, introduïu la paraula clau <code>auto-fill</code>. Per al segon paràmetre de la funció utilitzem <code>minmax()</code>, amb un valor mínim igual a la mida mínima de la pista que ens agradaria tenir i un màxim de <code>1fr</code>.</p>

<p>Proveu-ho ara al vostre fitxer amb el CSS següent:</p>

<div id="Grid_5">
<div class="hidden">
<h6 id="As_many_columns_as_will_fit">As many columns as will fit</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container &gt; div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}
                </pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;div&gt;One&lt;/div&gt;
  &lt;div&gt;Two&lt;/div&gt;
  &lt;div&gt;Three&lt;/div&gt;
  &lt;div&gt;Four&lt;/div&gt;
  &lt;div&gt;Five&lt;/div&gt;
  &lt;div&gt;Six&lt;/div&gt;
  &lt;div&gt;Seven&lt;/div&gt;
&lt;/div&gt;                      </pre>
</div>

<pre class="brush: css notranslate">.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}</pre>
</div>

<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p>

<p>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.</p>

<h2 id="Ubicació_basada_en_línies">Ubicació basada en línies</h2>

<p>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.</p>

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

<ul>
 <li>{{cssxref ("grid-column-start")}}</li>
 <li>{{cssxref ("grid-column-end")}}</li>
 <li>{{cssxref ("grid-row-start")}}</li>
 <li>{{cssxref ("grid-row-end")}}</li>
</ul>

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

<p>    {{cssxref ("grid-column")}}<br>
     {{cssxref ("grid-row")}}</p>

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

<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">Descarregueu aquest fitxer com a punt de partida</a> o <a href="https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html">vegeu-lo en directe aquí</a>. 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.</p>

<p>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:</p>

<pre class="brush: css notranslate">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;
}</pre>

<div id="Grid_6">
<div class="hidden">
<h6 id="Line-based_placement">Line-based placement</h6>

<pre class="brush: css notranslate">                body {
                    width: 90%;
                    max-width: 900px;
                    margin: 2em auto;
                    font: .9em/1.2 Arial, Helvetica, sans-serif;
                }

                .container {
                    display: grid;
                    grid-template-columns: 1fr 3fr;
                    grid-gap: 20px;
                }
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;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}

aside {
  border-right: 1px solid #999;
}
</pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;header&gt;This is my lovely blog&lt;/header&gt;
  &lt;article&gt;
    &lt;h1&gt;My article&lt;/h1&gt;
    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
  &lt;/article&gt;
  &lt;aside&gt;
    &lt;h2&gt;Other things&lt;/h2&gt;
    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
  &lt;/aside&gt;
  &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
&lt;/div&gt;               </pre>
</div>
</div>

<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p>

<div class="blockIndicator note">
<p><strong>Nota:</strong> també podeu utilitzar el valor <code>-1</code> 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 <code>-1</code> no es referirà a la línia final de la quadrícula implícita.</p>
</div>

<h2 id="Posicionament_amb_grid-template-areas">Posicionament amb grid-template-areas</h2>

<p>Una forma alternativa de col·locar elements a la quadrícula és fer servir la propietat {{cssxref ("grid-template-areas")}} i donar un nom als diversos elements del vostre disseny.</p>

<p>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.</p>

<pre class="brush: css notranslate">.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;
}</pre>

<p>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!</p>

<div id="Grid_7">
<div class="hidden">
<h6 id="Line-based_placement_2">Line-based placement</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}

aside {
  border-right: 1px solid #999;
}

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

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;header&gt;This is my lovely blog&lt;/header&gt;
  &lt;article&gt;
    &lt;h1&gt;My article&lt;/h1&gt;
    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
  &lt;/article&gt;
  &lt;aside&gt;&lt;h2&gt;Other things&lt;/h2&gt;
    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
  &lt;/aside&gt;
  &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
&lt;/div&gt;                     </pre>
</div>
</div>

<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p>

<p>Les regles per a les <code>grid-template-areas</code> són les següents:</p>

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

<p>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.</p>

<h2 id="Un_framework_de_graella_amb_CSS_Grid">Un framework de graella amb CSS Grid</h2>

<p>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 <em>framework</em>: ja hi és, a l’especificació.</p>

<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">Descarregueu el fitxer de punt de partida</a>. 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.</p>

<pre class="brush: css notranslate">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;
}</pre>

<div id="Grid_8">
<div class="hidden">
<h6 id="A_CSS_Grid_Grid_System">A CSS Grid Grid System</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

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

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

header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}

aside {
  border-right: 1px solid #999;
}
                </pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;header&gt;This is my lovely blog&lt;/header&gt;
  &lt;article&gt;
    &lt;h1&gt;My article&lt;/h1&gt;
    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
  &lt;/article&gt;
  &lt;aside&gt;&lt;h2&gt;Other things&lt;/h2&gt;
    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
  &lt;/aside&gt;
  &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
&lt;/div&gt;
                        </pre>
</div>
</div>

<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p>

<p>Si feu servir el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a> per superposar les línies de quadrícula del vostre disseny, podreu veure com funciona la nostra quadrícula de 12 columnes.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png" style="height: 1026px; width: 2028px;"></p>
</div>

<h2 id="Posa_a_prova_els_teus_coneixements">Posa a prova els teus coneixements</h2>

<p>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 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">Test your skills: Grids</a>.</p>

<h2 id="Resum">Resum</h2>

<p>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ó.</p>

<h2 id="Veieu_també">Veieu també</h2>

<ul>
 <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS Grid guides</a></li>
 <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a></li>
</ul>

<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Assessment", "Learn/CSS/CSS_layout")}}</p>