unslug ca: move

10 files changed, 3838 insertions, 0 deletions

diff --git a/files/ca/learn/css/css_layout/flexbox/index.html b/files/ca/learn/css/css_layout/flexbox/index.html
new file mode 100644
index 0000000000..37f31f619b
--- /dev/null
+++ b/files/ca/learn/css/css_layout/flexbox/index.html
@@ -0,0 +1,330 @@
+---
+title: Flexbox
+slug: Learn/CSS/Disseny_CSS/Flexbox
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - CSS layouts
+  - CodingScripting
+  - Flexible Boxes
+  - Guide
+  - Layout
+  - Layouts
+  - Learn
+  - flexbox
+translation_of: Learn/CSS/CSS_layout/Flexbox
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><a href="/ca/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> és un mètode de disseny de pàgina web unidimensional que distribueix els elements de la pàgina web en files o en columnes. Els elements són «flexibles» i omplen tot l’espai de més o s’encongeixen per caber en espais més petits. Aquest article n’explica els fonaments.</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 l’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>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectiu:</th>
+   <td>Aprendre a utilitzar el sistema de disseny de pàgines web Flexbox.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Per_què_Flexbox">Per què Flexbox?</h2>
+
+<p>Durant molt de temps, les úniques eines fiables compatibles amb els navegadors, disponibles per crear dissenys de pàgina web amb CSS eren mètodes com ara els <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flotadors">elements flotants (<em>floats</em>)</a> i el <a href="/ca/docs/Learn/CSS/Disseny_CSS/Posicionament">posicionament</a>. Estan bé i funcionen, però d'alguna manera també són més limitats i frustrants.</p>
+
+<p>Uns requisits senzills de disseny de pàgina web com els que enumerem a continuació són difícils o impossibles d'aconseguir amb aquestes eines d’una manera còmoda i flexible:</p>
+
+<ul>
+ <li>Que un bloc de contingut es centri verticalment dins de l’element pare.</li>
+ <li>Que tots els elements fills d'un contenidor ocupin la mateixa quantitat d'amplada/alçada, independentment de la quantitat d'amplada/alçada que hi hagi disponible.</li>
+ <li>Que totes les columnes d'un disseny de pàgina en columnes múltiples adoptin la mateixa alçada, encara que continguin una quantitat de contingut diferent.</li>
+</ul>
+
+<p>Com veureu en les properes seccions, Flexbox facilita moltes tasques de disseny de pàgina web. Aprofundim-hi!</p>
+
+<h2 id="Un_exemple_senzill">Un exemple senzill</h2>
+
+<p>En aquest article, et farem treballar en un seguit d'exercicis que t’ajudaran a entendre com funciona Flexbox. Per començar, fes una còpia local del primer fitxer d'inici, <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, que trobaràs en el nostre repositori de GitHub; carrega’l en un navegador modern (com Firefox o Chrome) i consulta’n el codi en el teu editor. També ho pots <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">veure en viu aquí</a>.</p>
+
+<p>Observa que hi ha un element {{htmlelement("header")}} amb un títol d’encapçalament de nivell superior i un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. Els farem servir per a crear un disseny de tres columnes força habitual.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<h2 id="Especificar_els_elements_flexbox">Especificar els elements flexbox</h2>
+
+<p>Per començar hem de decidir quins elements volem configurar perquè es comportin com caixes flexibles. Per tal de fer-ho, establim un valor especial de {{cssxref("display")}} en l'element pare dels elements als quals afectarà. En aquest cas, volem que siguin els elements {{htmlelement("article")}}, per la qual cosa ho configurem en l’element {{htmlelement("section")}}:</p>
+
+<pre class="brush: css notranslate">section {
+  display: flex;
+}</pre>
+
+<p>Això fa que l'element <code>&lt;section&gt;</code> esdevingui un <strong>contenidor flexible</strong> i els seus fills <strong>ítems flexibles</strong>. El resultat d'això hauria de presentar un aspecte semblant a això:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p>
+
+<p>Per tant, aquesta declaració única, ens dona tot el que necessitem; increïble, oi? Tenim el nostre disseny de pàgina de columna múltiple amb columnes de la mateixa mida, i que tenen la mateixa alçada. Això és perquè els valors predeterminats que s’han donat als elements flex (els fills del contenidor flex) estan dissenyats per a resoldre problemes comuns com aquest.</p>
+
+<p>Per deixar-ho clar, reiterem el que passa aquí. L’element al qual hem donat un valor de {{cssxref("display")}} de <code>flex</code> actua com un element de nivell de bloc en termes de com interactua amb la resta de la pàgina, però els seus fills es presenten com a elements flexibles. La següent secció explicarà amb més detall què significa això. Fixeu-vos també que podeu utilitzar un valor de <code>display</code> d'<code>inline-flex</code> si voleu disposar els fills d'un element com a elements flexibles, però que aquest element es comporti com un element en línia.</p>
+
+<h2 id="El_model_flex">El model flex</h2>
+
+<p>Els elements que es disposen com caixes flexibles, es distribueixen al llarg de dos eixos:</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p>
+
+<ul>
+ <li>L'<strong>eix principal</strong> (<strong><em>main axis</em></strong>) és l'eix que corre en la direcció en què es disposen els elements flex (p. ex., com files al llarg de la pàgina o com columnes, cap avall de la pàgina). L'inici i el final d'aquest eix reben els noms d’<strong>inici principal</strong> (<strong><em>main start</em></strong>) i <strong>final principal</strong> (<em><strong>main end</strong></em>).</li>
+ <li>L'<strong>eix transversal</strong> (<strong><em>cross axis</em></strong>) és l'eix que corre perpendicular a la direcció en què es disposen els elements flexibles. L'inici i el final d'aquest eix s'anomenen <strong>inici transversal</strong> (<strong><em>cross-start</em></strong>) i <strong>final tranversal</strong> (<strong><em>cross-end</em></strong>).</li>
+ <li>L'element pare que està configurat amb <code>display: flex</code> (la secció {{htmlelement("section")}} del nostre exemple) s'anomena <strong>contenidor flex</strong> (<strong><em>flex container</em></strong>).</li>
+ <li>
+  <p>Els elements que es disposen com caixes flexibles dins del contenidor flex s'anomenen <strong>elements flexibles</strong> (flex items) (els elements {{htmlelement("article")}} del nostre exemple).</p>
+ </li>
+</ul>
+
+<p>Tingues present aquesta terminologia a mesura que avances en les seccions. Sempre pots tornar enrere si en algun moment l’ús d’aquests termes et genera confusions.</p>
+
+<h2 id="Columnes_o_files"><span id="result_box" lang="ca">Columnes o files?</span></h2>
+
+<p>Flexbox proporciona una propietat anomenada {{cssxref("flex-direction")}}, que especifica en quina direcció discorre l'eix principal (en quina direcció es disposen les caixes flexibles fill); per defecte, està definida en <code>row</code>, que fa que els elements flexibles es disposin en una fila en la direcció de l'idioma predeterminat amb què funciona el teu navegador (d'esquerra a dreta, en el cas d'un navegador en català).</p>
+
+<p>Prova d'afegir a la teva regla <code>&lt;section&gt;</code> la declaració següent:</p>
+
+<pre class="brush: css notranslate">flex-direction: column;</pre>
+
+<p>Observa que això posa de nou els elements en una disposició en columna, igual que estaven abans d’afegir-hi el CSS. Abans de continuar, elimina aquesta declaració del teu exemple.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: També pots disposar elements flexibles en direcció inversa amb els valors <code>row-reverse</code> i <code>column-reverse</code>. Experimenta també amb aquests valors.</p>
+</div>
+
+<h2 id="Ajust">Ajust</h2>
+
+<p>Un problema que sorgeix quan tens un disseny de pàgina amb una amplada o una alçada fixa és que els fills de l’element flexbox poden desbordar el contenidor i trencar el disseny de la pàgina. Fes un cop d'ull al nostre exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> i <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">mira’l en directe</a> (fes primer una còpia local d'aquest fitxer, si vols seguir amb aquest exemple):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+
+<p>Aquí observem que els fills desborden el contenidor. Una manera de solucionar això és afegir a la teva regla <code><a href="/ca/docs/Web/HTML/Element/section">&lt;section&gt;</a></code> la declaració següent:</p>
+
+<pre class="brush: css notranslate">flex-wrap: wrap;</pre>
+
+<p>Afegeix també la declaració següent a la teva regla <code><a href="/ca/docs/Web/HTML/Element/article">&lt;article&gt;</a></code></p>
+
+<pre class="brush: css notranslate">flex: 200px;</pre>
+
+<p>Ara prova-ho; observa que el disseny es veu força més bé ara que hi has inclòs això:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">Ara hi ha diverses files, i a cada fila hi ha tantes elements fill flexbox com és raonable que hi hagi, i si hi ha cap desbordament, es genera una altra línia. La declaració <code>flex: 200px</code> que hem establer per als elements <code>&lt;article&gt;</code> significa que cada article tindrà com a mínim una amplada de 200px; més endavant parlarem d'aquesta propietat amb més detall. També pots observar que els últims fills de l'última fila s’han fet més amples, de manera que la fila està igualment tota plena.</p>
+
+<p>Però encara hi podem fer més. Primer de tot, prova de canviar el valor de la propietat {{cssxref("flex-direction")}} a <code>row-reverse</code>; observa que encara tens el disseny de files múltiples, però ara comença des de la cantonada oposada de la finestra del navegador i flueix en sentit invers.</p>
+
+<h2 id="La_propietat_flex-flow_abreujada">La propietat <code>flex-flow</code> abreujada</h2>
+
+<p>En aquest punt, val la pena observar que hi ha una propietat abreujada per a {{cssxref("flex-direction")}} i {{cssxref("flex-wrap")}}, que és: {{cssxref("flex-flow")}}. Per exemple, pots substituir:</p>
+
+<pre class="brush: css notranslate">flex-direction: row;
+flex-wrap: wrap;</pre>
+
+<p>per</p>
+
+<pre class="brush: css notranslate">flex-flow: row wrap;</pre>
+
+<h2 id="Dimensió_flexible_dels_elements_flexibles">Dimensió flexible dels elements flexibles</h2>
+
+<p>Tornem ara al nostre primer exemple i observem com podem controlar quina proporció d'espai poden ocupar els elements flexibles. Fes servir la teva còpia local de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, o fes una còpia de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> com a punt de partida nou (també el pots <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">veure en viu</a>).</p>
+
+<p>Primer, afegeix la regla següent al final del teu CSS:</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1;
+}</pre>
+
+<p>Es tracta d'un valor de proporció sense unitat que determina quina quantitat de l'espai disponible al llarg de l'eix principal ocupa cada element flexible. En aquest cas donem a cada element {{htmlelement("article")}} un valor de 1, que significa que tots ocuparan una quantitat igual de l'espai que sobri després que s'hagin establert elements com ara l’àrea de farciment i el marge. És una proporció, que significa que donar a cada element flexible un valor de 400.000 tindria exactament el mateix efecte.</p>
+
+<p>A continuació, afegeix la regla següent a sota de l'anterior:</p>
+
+<pre class="brush: css notranslate">article:nth-of-type(3) {
+  flex: 2;
+}</pre>
+
+<p>Aleshores, actualitza. Observa que el tercer element {{htmlelement("article")}} ocupa el doble de l'amplada disponible que els altres dos; perquè ara hi ha en total quatre unitats proporcionals disponibles. Els dos primers elements flexibles en tenen una cadascun, i prenen 1/4 de l'espai disponible cadascun. El tercer té dues unitats, de manera que ocupa 2/4 de l'espai disponible (o el que és el mateix, la meitat).</p>
+
+<p>També pots especificar un valor de mida mínima per al valor flex. Actualitza les teves regles per als elements <code>&lt;article&gt;</code>, així:</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}</pre>
+
+<p>Això bàsicament estableix que «Es dona a cada element flexible primer 200px de l'espai disponible. A continuació, la resta de l'espai disponible es reparteix segons les unitats de proporció». Actualitza i observa com es reparteix l'espai ara.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<p>El valor real de flexbox es pot apreciar en la flexibilitat / capacitat de resposta; si canvies la mida de la finestra del navegador o afegeixes un altre element {{htmlelement("article")}}, el disseny de pàgina encara funciona.</p>
+
+<h2 id="Propietat_flex_abreujada_o_no_abreujada">Propietat <code>flex</code> abreujada o no abreujada</h2>
+
+<p>{{Cssxref("flex")}} és una propietat de abreujada que pot especificar fins a tres valors diferents:</p>
+
+<ul>
+ <li>El valor de la proporció sense unitat que hem comentat abans. Es pot especificar per a cada element usant la propietat no abreujada {{cssxref("flex-grow")}}.</li>
+ <li>Un segon valor de proporció sense unitat, {{cssxref("flex-shrink")}}, que entra en joc quan els elements flexibles desborden de l’element contenidor. Especifica quanta de la quantitat que desborda es treu de la mida de cada element flexible per a evitar que desbordi del contenidor. Aquesta és una característica avançada de flexbox i no la detallarem més en aquest article.</li>
+ <li>El valor mínim de la mida, que hem comentat abans. Es pot especificar per a cada element usant el valor no abreujat {{cssxref("flex-base")}}.</li>
+</ul>
+
+<p>Recomanem evitar l'ús de les propietats flex no abreujades, si no és que t’és realment necessari (per exemple, perquè has de substituir alguna configuració anterior). Comporta escriure una gran quantitat de codi addicional, i pot acabar sent una mica confús.</p>
+
+<h2 id="Alineació_horitzontal_i_vertical">Alineació horitzontal i vertical</h2>
+
+<p>També pots utilitzar funcions flexbox per a alinear elements flexibles al llarg dels eixos principals o transversals. Ho expliquem amb un nou exemple, <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (també el pots <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">veure en viu</a>), que convertirem en una bonica barra d'eines/botons flexible. De moment, observa aquesta barra de menú horitzontal amb alguns botons agrupats a la cantonada superior esquerra.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p>
+
+<p><span id="result_box" lang="ca">Primer, fes una còpia local d'aquest exemple</span>.</p>
+
+<p>A continuació, afegeix a la part inferior del CSS de l'exemple el codi següent:</p>
+
+<pre class="brush: css notranslate">div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>Actualitza la pàgina i observa que els botons estan ben centrats, horitzontalment i verticalment. Ho hem fet amb dues propietats noves.</p>
+
+<p>El control {{cssxref("align-items")}} disposa els elements flexibles sobre l'eix transversal.</p>
+
+<ul>
+ <li>El valor predeterminat és <code>stretch</code>, que estira tots els elements flexibles fins a ocupar tot l’espai de l’element pare en la direcció de l'eix transversal. Si l’element pare no té una amplada fixa en la direcció de l'eix transversal, tots els elements flexibles es faran tan llargs com l’element flexible més llarg. Per això el nostre primer exemple tenia per defecte columnes de la mateixa alçada.</li>
+ <li>El valor <code>center</code> que hem utilitzat en el codi anterior manté les dimensions intrínseques dels elements, però els centrats al llarg de l'eix transversal. És per això que els botons d’aquest exemple estan centrats verticalment.</li>
+ <li>També pots tenir valors com <code>flex-start</code> i <code>flex-end</code>, que alineen tots els elements al principi i al final de l'eix transversal, respectivament. Consulta’n tots els detalls en {{cssxref("align-items")}}.</li>
+</ul>
+
+<p>Pots anul·lar el comportament {{cssxref("align-items")}} per a elements flexibles individuals amb la propietat {{cssxref("align-self")}}. Per exemple, afegeix al teu CSS el codi el següent:</p>
+
+<pre class="brush: css notranslate">button:first-child {
+  align-self: flex-end;
+}</pre>
+
+<p>Dona un cop d'ull a l'efecte que hi produeix i retira de nou aquest codi quan hagis acabat.</p>
+
+<p>La propietat {{cssxref("justify-content")}} controla on s’ubiquen els elements flexibles sobre l'eix principal.</p>
+
+<ul>
+ <li>El valor per defecte és <code>flex-start</code>, que col·loca tots els elements al principi de l'eix principal.</li>
+ <li>Pots fer servir <code>flex-end</code> perquè es col·loquin al final.</li>
+ <li>El valor <code>center</code> també és un valor per a <code>justify-content</code> i posa els elements flexibles al centre de l'eix principal.</li>
+ <li>El valor que hem utilitzat abans, <code>space-around</code>, és útil perquè distribueix tots els elements sobre l'eix principal de manera uniforme i deixa una mica d'espai en cada extrem.</li>
+ <li>Hi ha un altre valor, <code>space-between</code>, que és molt similar a <code>space-around</code>, però que no deixa cap espai als extrems.</li>
+</ul>
+
+<p>T’animem a jugar amb aquests valors i veure com funcionen abans de continuar.</p>
+
+<h2 id="Ordena_els_elements_flexibles">Ordena els elements flexibles</h2>
+
+<p>Flexbox també té una característica que canvia l'ordre de disposició dels elements flexibles sense afectar l'ordre d'origen. Aquesta és una altra característica que és impossible de fer amb els mètodes tradicionals de disseny de pàgines web.</p>
+
+<p>El codi per a això és senzill: afegeix al codi d'exemple de la barra de botons el codi CSS següent:</p>
+
+<pre class="brush: css notranslate">button:first-child {
+  order: 1;
+}</pre>
+
+<p>Actualitza, i observa que ara el botó «Smile» s'ha mogut al final de l'eix principal. Parlarem de com això funciona amb una mica més detall:</p>
+
+<ul>
+ <li>Per defecte, tots els elements flexibles tenen un valor d’ordre ({{cssxref("order")}}) de 0.</li>
+ <li>Els elements flexibles que estan configurats amb un valor d’ordre més alt apareixen més endavant en l'ordre de visualització que els elements amb valors d’ordre més baix.</li>
+ <li>Els elements flexibles que tenen el mateix valor d'ordre apareixen en l’ordre d'origen. Així, si hi ha quatre elements que tenen configurats els valors d'ordre 2, 1, 1 i 0, respectivament, l’ordre de visualització serà 4t, 2n, 3r i 1r.</li>
+ <li>El 3r element apareix després del 2n perquè té el mateix valor d'ordre i està després en l'ordre d'origen.</li>
+</ul>
+
+<p>Pots establir valors d'ordre negatius i fer que els elements apareguin abans que els elements amb un ordre 0. Per exemple, pots fer que el botó «Blush» aparegui al principi de l'eix principal amb la següent regla:</p>
+
+<pre class="brush: css notranslate">button:last-child {
+  order: -1;
+}</pre>
+
+<h2 id="Caixes_flexibles_imbricades">Caixes flexibles imbricades</h2>
+
+<p>Amb flexbox és possible crear dissenys força complexos. És del tot correcte establir que un element flexible sigui també un contenidor flexible, de manera que els elements fills també es disposin com caixes flexibles. Dona un cop d'ull a <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (o també el pots <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">veure en viu</a>).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>L'HTML d’això és força senzill. Hi ha un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. El tercer element {{htmlelement("article")}} conté tres elements {{htmlelement("div")}}:</p>
+
+<pre class="notranslate">section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button</pre>
+
+<p>Observa el codi que hem utilitzat per al disseny.</p>
+
+<p>En primer lloc, establim que els fills de {{htmlelement("section")}} es disposin com caixes flexibles.</p>
+
+<pre class="brush: css notranslate">section {
+  display: flex;
+}</pre>
+
+<p>A continuació, establim alguns valors flex en els propis elements {{htmlelement("article")}}. Aquí cal tenir en compte la 2a regla; configurem el tercer element {{htmlelement("article")}} de manera que els seus elements fills es disposin també com elements flexibles, però aquesta vegada en columna.</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+</pre>
+
+<p>A continuació, seleccionem el primer element {{htmlelement("div")}}. Utilitzem la declaració <code>flex: 1 100px;</code> perquè hi doni efectivament una alçada mínima de 100px, aleshores en configurem els elements fills (els elements {{htmlelement("button")}}) perquè també siguin elements flexibles. Els distribuïm en fila perquè ocupin tot l’espai amb la propietat <code>wrap</code> i els alineem al centre de l'espai disponible, com hem fet en l'exemple del botó individual que hem vist abans.</p>
+
+<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child {
+  flex: 1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>Finalment, establim les dimensions del botó, però la qüestió interessant és que hi donem un valor de flex de 1. Això té un efecte molt interessant, que pots observar si canvies la mida de l'amplada de la finestra del navegador. Els botons ocuparan tant d’espai com puguin i es disposaran sobre la mateixa línia tant com sigui possible, però quan ja no càpiguen amb comoditat a la mateixa línia, cauran a la línia següent.</p>
+
+<pre class="brush: css notranslate">button {
+  flex: 1;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}</pre>
+
+<h2 id="Compatibilitat_amb_altres_navegadors">Compatibilitat amb altres navegadors</h2>
+
+<p>Flexbox és compatible amb la majoria de navegadors nous: Firefox, Chrome, Opera, Microsoft Edge i IE 11, i les versions més noves d'Android/iOS, etc. No obstant això, cal tenir en compte que encara hi ha navegadors antics en ús que no admeten Flexbox (o bé n’admeten una versió antiga i desactualitzada).</p>
+
+<p>Mentre ets en procés d’aprendre i experimentar, això no importa gaire; però si consideres l'ús de flexbox en un lloc web real, has de fer proves i assegurar-te que la teva experiència d'usuari continua sent acceptable en el màxim nombre de navegadors possible.</p>
+
+<p>Flexbox és una mica més complicat que altres característiques CSS. Per exemple, si un navegador no té ombres CSS, probablement el lloc web serà encara usable. En canvi, la no-compatibilitat amb les característiques de flexbox probablement trencarà del tot el disseny i inutilitzarà el lloc web.</p>
+
+<p>En un altre mòdul parlarem de les estratègies per a superar els complexos problemes de compatibilitat dels navegadors.</p>
+
+<h2 id="Posa_a_prova_les_teves_habilitats">Posa a prova les teves habilitats</h2>
+
+<p>Hem vist moltes coses en aquest article. En recordes la informació més important? Trobaràs més tests per poder comprovar si has retingut la informació abans de seguir a <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a>.</p>
+
+<h2 id="Resum">Resum</h2>
+
+<p>Això clou el nostre recorregut pels fonaments de flexbox. Esperem que t’hagis divertit i que sàpigues jugar-hi mentre continues endavant amb el teu aprenentatge. A continuació, veurem un altre aspecte important dels dissenys CSS, els sistemes de graella.</p>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
diff --git a/files/ca/learn/css/css_layout/floats/index.html b/files/ca/learn/css/css_layout/floats/index.html
new file mode 100644
index 0000000000..25d2fe01a6
--- /dev/null
+++ b/files/ca/learn/css/css_layout/floats/index.html
@@ -0,0 +1,516 @@
+---
+title: Flotadors (Floats)
+slug: Learn/CSS/Disseny_CSS/Flotadors
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - Clearing
+  - CodingScripting
+  - Floats
+  - Guide
+  - Layout
+  - columns
+  - multi-column
+translation_of: Learn/CSS/CSS_layout/Floats
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div>
+
+<p>Originalment pensada per a flotar imatges dins de blocs de text, la propietat {{cssxref("float")}} va esdevenir una de les eines més utilitzades per a crear dissenys multicolumna a les pàgines web. Amb l'arribada de Flexbox i Grid ha tornat ara al seu propòsit original, tal com s'explica en aquest article.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisits previs:</th>
+   <td>HTML bàsic (vegeu <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>), i una idea de com funciona CSS (vegeu <a href="/ca/docs/Learn/CSS/First_steps">Introducció a CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectiu:</th>
+   <td>Aprendre a crear elements flotants a les pàgines web, i a fer servir la propietat <em>clear</em> i altres mètodes per a netejar els elements flotants.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="La_història_dels_elements_flotants">La història dels elements flotants</h2>
+
+<p>La propietat {{cssxref("float")}} fou introduïda per a permetre als desenvolupadors implementar dissenys senzills que incloguessin una imatge flotant dins d'una columna de text, amb el text envoltant la part esquerra o dreta de la imatge. El tipus de cosa que trobes habitualment en el disseny d'un diari.</p>
+
+<p>Però els desenvoupadors web aviat s'adonaren que podien flotar qualsevol cosa, i no només les imatges, pel que el seu ús s'amplià, per exemple, creant efectes de disseny divertits com els d'aquestes <a href="https://css-tricks.com/snippets/css/drop-caps/">caplletres</a>.</p>
+
+<p>Els elements flotants han estat utitlitzats habitualment per a crear dissenys web complets amb múltiples columnes situades l'una al costat de l'altra (el comportament per defecte seria que les columnes se situessin les unes sota les altres, en el mateix ordre en què apareixen al codi font). Ara hi ha disponibles tècniques més modernes i millors, que explorarem més endavant en aquest mòdul, per la qual cosa l'ús de {{cssxref("float")}} d'aquesta manera s'hauria de contemplar com una <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">tècnica antiquada</a>.</p>
+
+<p>En aquest article ens centrarem en l'ús apropiat de la propietat {{cssxref("float")}}.</p>
+
+<h2 id="Un_exemple_de_float_simple">Un exemple de float simple</h2>
+
+<p>Explorem com utilitzar els <em>float</em>. Començarem amb un exemple realment simple que inclou un bloc de text flotant al voltant d'un element. Pots acompanyar-nos creant un fitxer <code>index.html</code> al teu ordinador, omplint-lo amb <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">una plantilla HTML simple</a>, i inserint el codi següent als llocs adequats. Al final de la secció podràs veure un exemple en viu de com hauria de ser el codi final.</p>
+
+<p>Primer, comencem amb una mica d'HTML simple — afegeix el següent al cos del teu HTML, eliminant qualsevol altra cosa que hi hagués abans:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;
+
+&lt;div class="box"&gt;Caixa flotant&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. &lt;/p&gt;
+
+&lt;p&gt;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;</pre>
+
+<p>Ara aplica el següent CSS al teu HTML (fent servir un element {{htmlelement("style")}} o un {{htmlelement("link")}} per a separar el fitxer <code>.css</code>  — tu tries):</p>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}</pre>
+
+<p>Si deses y recarregues la pàgina, veuràs quelcom semblant a allò que esperaries: la caixa es troba per sobre del text, en un flux normal. Per a flotar el text al voltant, afegeix les propietats {{cssxref("float")}} i {{cssxref("margin-right")}} a la regla <code>.box</code>:</p>
+
+<pre class="brush: css notranslate">.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}</pre>
+
+<p>Ara, si deses i recarregues, podràs veure alguna cosa semblant a això:</p>
+
+<div id="Float_1">
+<div class="hidden">
+<h6 id="Float_Example_1">Float Example 1</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;
+
+&lt;div class="box"&gt;Caixa flotant&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&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;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_1', '100%', 500) }}</p>
+
+<p>Analitzem ara com funciona el <em>float</em> — l'element amb el <em>float</em> aplicat (l'element {{htmlelement("div")}} en aquest cas) és extret del flux normal del document i està enganxat al costat esquerre del seu element contenidor pare ({{htmlelement("body")}}, en aquest cas). Qualsevol contingut que estigui per sota de l'element flotat en el flux normal, ara l'envoltarà, omplint l'espai a la dreta fins a la part superior de l'element flotant. Allà s'aturarà.</p>
+
+<p>Flotar el contingut a la dreta té exactament el mateix efecte, però a la inversa — l'element flotat s'enganxarà a la dreta, i el contingut l'envoltarà per l'esquerra. Prova de canviar el valor de la propietat <em>float</em> a <code>right</code> i substitueix {{cssxref("margin-right")}} per {{cssxref("margin-left")}} al darrer conjunt de regles per veure el resultat.</p>
+
+<p>Tot i que podem afegir un marge a l'element flotant per alunyar el text, no podem afegir un marge al text per allunyar-lo del flotant. Això es deu al fet que un element flotant s'extreu del flux normal i les caixes dels següents elements segueixen per darrera del flotador. Pots comprovar-ho fent alguns canvis a l'exemple.</p>
+
+<p>Afegeix una clase <code>special</code> al primer paràgraf de text, el que succeeix immediatament a la caixa flotant, i després afegeix al teu CSS les següents regles. Això li donarà al paràgraf següent un color de fons.</p>
+
+<pre class="brush: css notranslate">.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+</pre>
+
+<p>Per tal que l'efecte sigui més fàcil de veure, canvia el <code>margin-right</code> del teu element flotant a <code>margin</code>, per obtener espai al voltant de l'element flotant. Veuràs que el fons del paràgraf passa just per sota de la caixa flotant, com en l'exemple inferior.</p>
+
+<div id="Float_2">
+<div class="hidden">
+<h6 id="Float_Example_2">Float Example 2</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;
+
+&lt;div class="box"&gt;Caixa flotant&lt;/div&gt;
+
+&lt;p class="special"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&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;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p>
+
+<p>Els quadres de línia del següent element s'han escurçat perquè el text discorri al voltant del flotador, però com que el flotador s'ha eliminat del flux normal, el quadre al voltant del paràgraf encara manté l'ample complet.</p>
+
+<h2 id="Netejant_floats">Netejant floats</h2>
+
+<p>Hem vist que el flotador s'elimina del flux normal i que els altres elements es mostraran al seu costat. Per tant, si volem evitar que un element a continuació es mogui cap amunt, hem de netejar el <em>float</em>. Això s'aconsegueix amb la propietat {{cssxref ("clear")}}.</p>
+
+<p>En l'HTML de l'exemple anterior, afegeix una classe <code>cleared</code> al segon paràgraf sota de l'element flotant. Després, afegeix això al teu CSS:</p>
+
+<pre class="brush: css notranslate">.cleared {
+  clear: left;
+}
+</pre>
+
+<div id="Float_3">
+<div class="hidden">
+<h6 id="Float_Example_3">Float Example 3</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;
+
+&lt;div class="box"&gt;Caixa flotant&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p class="cleared"&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;
+    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.cleared {
+  clear: left;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_3', '100%', 600) }}</p>
+
+<p>Hauries de veure que el següent paràgraf neteja l'element flotant i ja no apareix al seu costat. La propietat <code>clear</code> accepta els següents valors:</p>
+
+<ul>
+ <li><code>left</code>: neteja els elements flotats a l'esquerra.</li>
+ <li><code>right</code>: neteja els elements flotats a la dreta.</li>
+ <li><code>both</code>: neteja qualsevol element flotat, a l'esquerra o a la dreta.</li>
+</ul>
+
+<h2 id="Netejar_la_caixa_contenidora_dun_float">Netejar la caixa contenidora d'un float</h2>
+
+<p>Ara ja saps com netejar un element que es troba a continuació d'un element flotant, però observa el que succeeix si tens un flotant alt i un paràgraf curt, amb una caixa convenidora que envolta ambdós elements. Modifica el teu document per tal que el primer paràgraf i la caixa flotant es trobin dins d'un {{htmlelement("div")}} amb una classe <code>wrapper</code>.</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Caixa flotant&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Al teu CSS, afegeix la següent regla per a la teva classe <code>.wrapper</code> i després recarrega la pàgina:</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}</pre>
+
+<p>A més, elimina la classe <code>.cleared</code> anterior:</p>
+
+<pre class="comment-text  notranslate" id="ct-0">.cleared {
+    clear: left;
+}</pre>
+
+<p>Veuràs que, como en l'exemple on hem posat un color de fons al paràgraf, el color de fons passa per darrere de l'element flotant.</p>
+
+<div id="Float_4">
+<div class="hidden">
+<h6 id="Float_Example_4">Float Example 4</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Caixa flotant&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p class="cleared"&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;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p>
+
+<p>Un cop més, això és així perquè el flotador s'ha extret del flux normal. Netejar el següent elemento no ajuda a resoldre aquest problema de neteja de la caixa, on volem que la part inferior de la caixa envolti l'element flotant i que envolti el contingut fins i tot si el coningut és més curt. Hi ha tres maneres posssibles de resoldre això, dues que funcionen en tots els navegadors, però que tenen una mica de truc, i una tercera, nova manera de resoldre aquesta situació correctament.</p>
+
+<h3 id="El_hack_clearfix">El hack clearfix</h3>
+
+<p>La forma com aquesta situació s'ha tractat tradicionalment és utilitzant un truc conegut com el "truc clearfix". Això implica inserir algun contingut generat després de la caixa que conté el contingut flotant i envolvent, i configurar-lo per netejar ambdós.</p>
+
+<p>Afefeix el següent CSS a l'exemple:</p>
+
+<pre class="brush: css notranslate">.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}</pre>
+
+<p>Ara recarrega la pàgina i la caixa hauria de netejar-se. Això és bàsicament el mateix que si haguessis afegit un element HTML com un <code>&lt;div&gt;</code> a sota dels elements i li haguessis afegit la propietat <code>clear: both</code>.</p>
+
+<div id="Float_5">
+<div class="hidden">
+<h6 id="Float_Example_5">Float Example 5</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Caixa flotant&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&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;      </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_5', '100%', 600) }}</p>
+
+<h3 id="Fent_servir_overflow">Fent servir overflow</h3>
+
+<p>Un mètode alternatiu és establir la propietat {{cssxref("overflow")}} de l'element contenidor amb un valor diferent de <code>visible</code>.</p>
+
+<p>Elimina el CSS clearfix que has afegit en l'anterior secció i, en el seu lloc, afegeix <code>overflow: auto</code> a les regles de la caixa contenidora. Altre cop, la caixa hauria de netejar-se.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}</pre>
+
+<div id="Float_6">
+<div class="hidden">
+<h6 id="Float_Example_6">Float Example 6</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Caixa flotant&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&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;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p>
+
+<p>Aquest exemple funciona creant el que s'anomena un <em><strong>block formatting context</strong></em> (BFC) o context de format de bloc. És com un petit disseny dins de la nostra pàgina (dins la qual tot està contingut, per tant, el nostre element flotant està contingut dins del BFC i el fons es troba darrere d'ambdós elements. Això generalment funcionarà. Això no obstant, en certs casos, és possible que et trobis amb barres de desplaçament no desitjades o ombres retallades com a conseqüències no desitjades de l'ús del desbordament..</p>
+
+<h3 id="display_flow-root">display: flow-root</h3>
+
+<p>La manera moderna de resoldre aquest problema és fer servir el valor <code>flow-root</code> de la propietat <code>display</code>. Això existeix només per a crear un BFC sense fer servir trucs; no hi haurà conseqüències no desitjades quan el facis servir. Elimina <code>overflow: auto</code> de la regla <code>.wrapper</code> i afegeix <code>display: flow-root</code>. Assumint que el teu <a href="/en-US/docs/Web/CSS/display#Browser_compatibility">navegador sigui compatible</a>, la caixa es netejarà.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}</pre>
+
+<div id="Float_7">
+<div class="hidden">
+<h6 id="Float_Example_7">Float Example 7</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Caixa flotant&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&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;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_7', '100%', 600) }}</p>
+
+<h2 id="Resum">Resum</h2>
+
+<p>Ara ja saps tot el que has de saber sobre els flotadors en el desenvolupament web modern. Consulta l'article sobre els <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">mètodes de disseny antiquats</a> per obtenir informació de com es feien servir, cosa que pot ser-te útil si has de treballar en projectes antics.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="En_aquest_mòdul">En aquest mòdul</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
+</ul>
diff --git a/files/ca/learn/css/css_layout/grids/index.html b/files/ca/learn/css/css_layout/grids/index.html
new file mode 100644
index 0000000000..af97c6f989
--- /dev/null
+++ b/files/ca/learn/css/css_layout/grids/index.html
@@ -0,0 +1,699 @@
+---
+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>
diff --git a/files/ca/learn/css/css_layout/index.html b/files/ca/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..e74e5da0b9
--- /dev/null
+++ b/files/ca/learn/css/css_layout/index.html
@@ -0,0 +1,66 @@
+---
+title: Disseny CSS
+slug: Learn/CSS/Disseny_CSS
+tags:
+  - Beginner
+  - CSS
+  - Floating
+  - Grids
+  - Guide
+  - Landing
+  - Layout
+  - Learn
+  - Module
+  - Multiple column
+  - Positioning
+  - flexbox
+  - float
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">En aquest punt, ja hem examinat els fonaments de CSS, com l'estil del text, i l'estil i la manipulació de les caixes en el que estroba dins el contingut. Ara és hora de veure com col·locar les caixes al lloc correcte en relació amb la finestra de visualització, entre elles. Hem cobert els requisits previs necessaris de manera que ara podem aprofundir en el disseny CSS, provant diferents paràmetres de visualització, mètodes tradicionals de disseny que inclouen flotants i posicionament, i noves eines de disseny modernas, com flexbox.</p>
+
+<h2 id="Requisits_previs">Requisits previs</h2>
+
+<p><span id="result_box" lang="ca"><span>Abans de començar aquest mòdul, ja hauríeu de:</span></span></p>
+
+<ol>
+ <li>Estar familiaritzats amb els principis bàsics d' HTML, tal com es descriu en el mòdul <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a>.</li>
+ <li>Sentir-vos còmodes amb els fonaments CSS, tal com s'ha tractat a la <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a>.</li>
+ <li>Entendre com fer <a href="/en-US/docs/Learn/CSS/Styling_boxes">caixes d'estil</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Si esteu treballant en un ordinador/tauleta/altre dispositiu on no té la capacitat de crear els vostres propis fitxers, podeu provar (la majoria) d'exemples de codi, en un programa de codificació en línia com <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guies">Guies</h2>
+
+<p>Aquests articles proporcionaran instruccions sobre les eines i tècniques fonamentals de disseny, disponibles a CSS.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducció al disseny CSS</a></dt>
+ <dd>Aquest article recapitularà algunes de les característiques de disseny de CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref("display")}} - i introduïm alguns dels conceptes que cobrirem al llarg d'aquest mòdul.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotants</a></dt>
+ <dd>Originalment per a imatges flotants dins dels blocs de text, la propietat {{cssxref("float")}} s'ha convertit en una de les eines més utilitzades per crear diversos dissenys de columnes a les pàgines web. Aquest article ho explica tot.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionament</a></dt>
+ <dd>El posicionament us permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseguts un damunt de l'altre o quedant sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de {{cssxref("position")}}, i com utilitzar-los.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pràctics de posicionament</a></dt>
+ <dd>Amb els conceptes bàsics de posicionament coberts en l'últim article, veurem, ara, com construir un parell d'exemples del món real per il·lustrar quin tipus de coses podeu fer amb el posicionament.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
+ <dd>Una nova tecnologia, però amb suport, ara, bastant estès en tots els navegadors, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> està començant a estar preparat per a un ús generalitzat. Flexbox proporciona eines que permeten crear ràpidament dissenys complexos i flexibles i característiques que històricament resulten difícils amb CSS. Aquest article explica tots els fonaments.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Graelles</a></dt>
+ <dd>Els sistemes de graella són una altra característica molt comuna que s'utilitza en els dissenys de CSS, que solen implementar-se mitjançant flotadors o altres característiques de disseny. Imagineu el disseny com un nombre establert de columnes (p. Ex. 4, 6 o 12) i, a continuació, ajusteu les columnes de contingut dins d'aquestes columnes imaginàries. En aquest article explorarem la idea bàsica sobre la creació d'un sistema de graella, mireu l'ús d'un sistema de graella confeccionat per un marc (framework) de graella i finalitzeu l'experimentació amb les Graelles CSS - una incipient nova funció de navegador fa que l'implementació de disseny de graella a la Web sigui molt més fàcil.</dd>
+</dl>
+
+<h2 id="Avaluacions"><span id="result_box" lang="ca"><span>Avaluacions</span></span></h2>
+
+<p><span id="result_box" lang="ca"><span>Les següents avaluacions posaran a prova la vostra capacitat per dissenyar pàgines web amb CSS.</span></span></p>
+
+<dl>
+ <dt>Creació d'un disseny flexible multicolumna (TBD)</dt>
+ <dd>Aquesta avaluació provarà la vostra capacitat per crear un disseny estàndard de diverses columnes, amb algunes característiques interessants.</dd>
+ <dt>Creació d'un widget de control fix (TBD)</dt>
+ <dd>Aquesta avaluació desafia la vostra comprensió del posicionament, demanant-vos que creeu un widget de control de posició fix que permeti a l'usuari accedir als controls d'una aplicació web independentment d'on es desplaci.</dd>
+</dl>
diff --git a/files/ca/learn/css/css_layout/introduction/index.html b/files/ca/learn/css/css_layout/introduction/index.html
new file mode 100644
index 0000000000..88a924dc00
--- /dev/null
+++ b/files/ca/learn/css/css_layout/introduction/index.html
@@ -0,0 +1,700 @@
+---
+title: Introducció al disseny CSS
+slug: Learn/CSS/Disseny_CSS/Introduccio_disseny_CSS
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - Floats
+  - Grids
+  - Introduction
+  - Layout
+  - Learn
+  - Positioning
+  - Tables
+  - flexbox
+  - flow
+translation_of: Learn/CSS/CSS_layout/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">Aquest article recapitula algunes de les característiques de disseny CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref ("display")}}, i introdueix alguns dels conceptes que exposem al llarg d'aquest mòdul.</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>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectiu:</th>
+   <td>Adquirir una visió general de les tècniques de disseny de pàgines web amb CSS. Cada tècnica es pot aprendre amb més detall en tutorials posteriors.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les tècniques de disseny de pàgina web amb CSS ens permeten prendre els elements que hi ha en una pàgina web i controlar on estan posicionats en relació amb la seva posició predeterminada en el flux de disseny normal, els altres elements del voltant, l’element pare contenidor o la finestra de visualització / finestra principal. Les tècniques de disseny de pàgines que exposem amb més detall en aquest mòdul són:</p>
+
+<ul>
+ <li>Elements flotants</li>
+ <li>La propietat {{cssxref("display")}}</li>
+ <li>Flexbox</li>
+ <li>Graella</li>
+ <li>Posicionament</li>
+ <li>Taules CSS</li>
+ <li>Disposició de múltiples columnes</li>
+</ul>
+
+<p><span id="docs-internal-guid-3d1d84d1-7fff-8b2f-5bac-858fd61ba989" 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;">Cada tècnica té els seus usos, avantatges i inconvenients, i cap tècnica s'ha dissenyat per utilitzar-se aïllada. Entenent per a què s’ha dissenyat cada mètode estaràs en una bona posició per entendre quina és la millor disposició per a cada tasca.</span></p>
+
+<h2 id="Flux_normal"><span id="result_box" lang="ca">Flux normal</span></h2>
+
+<p>El flux normal és la manera com el navegador estableix les pàgines HTML de manera predeterminada quan no es fa res per controlar el disseny de pàgina. Vegem-ne un exemple HTML ràpid:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;I love my cat.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Buy cat food&lt;/li&gt;
+  &lt;li&gt;Exercise&lt;/li&gt;
+  &lt;li&gt;Cheer up friend&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;The end!&lt;/p&gt;</pre>
+
+<p>Per defecte, el navegador mostra aquest codi de la manera següent:</p>
+
+<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p>
+
+<p>Tingues en compte que aquí l'HTML es mostra en l'ordre exacte en què apareix en el codi d’origen, amb elements apilats l’un sobre l’altre: el primer paràgraf, seguit de la llista no ordenada, seguit del segon paràgraf.</p>
+
+<p>Per a molts dels elements de la pàgina el flux normal crea exactament la disposició que cal, però per dissenys més complexos et farà falta alterar aquest comportament per defecte fent ús d'alguna de les eines disponibles en CSS. Començar amb un document HTML ben estructurat és molt important, donat que així pots treballar amb com les coses es disposen per defecte, en comptes de barallar-t'hi.</p>
+
+<p>Les tècniques de disseny tendeixen a substituir aquest comportament predeterminat, utilitzant les tècniques següents:</p>
+
+<ul>
+ <li><strong>La propietat {{cssxref("display")}}:</strong> els valors habituals, com ara <code>block</code>, <code>inline</code> o <code>inline-block</code> poden canviar la manera com els elements es comporten en un flux normal (consulta l’article <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">Tipus de caixes CSS</a> per a obtenir-ne més informació), mentre que d’altres valors poc freqüents o especialitzats ens permeten disposar els elements de maneres completament diferents, utilitzant eines com Flexbox.</li>
+ <li><strong>Elements flotants:</strong> aplicant a {{cssxref("float")}} un valor com <code>left</code>, pots fer que els elements de nivell de bloc s'alineïn l’un al costat de l'altre en lloc de disposar-se l’un damunt de l'altre.</li>
+ <li><strong>La propietat {{cssxref("position")}}:</strong> et permet controlar amb precisió la disposició de caixes dintre d'altres caixes. El posicionat <code>static</code> és l'habitual en el flux normal, però pots fer que els elements es disposin d'altres maneres usant valors diferents, per exemple enganxats a la part superior de la finestra de visualització del navegador.</li>
+ <li><strong>Disposició en taules:</strong> les característiques dissenyades per aplicar estils a les parts d'una taula HTML poden usar-se sobre d'altres elements fent servir <code>display: table</code> i les propietats associades.</li>
+ <li><strong>Disposició multicolumna:</strong> Las propietats de <a href="/en-US/docs/Web/CSS/CSS_Columns">disposició multicolumna</a> poden fer que el contingut d'un bloc es disposi en columnes, com les d'un diari.</li>
+</ul>
+
+<h2 id="La_propietat_display">La propietat <code>display</code></h2>
+
+<p>Els mètodes principals per aconseguir un disseny de pàgina amb CSS són tots els valors de la propietat <code>display</code> (visualització). Aquesta propietat ens permet canviar la manera per defecte com es mostren les coses. Tot el que hi ha al flux normal té un valor de <code>display</code>, que s'utilitza com la forma per defecte en què es comporten els elements que hi estan configurats. Per exemple, el fet que els paràgrafs en català es mostrin un per sota de l’altre es deu al fet que s’estilen amb <code>display: block</code>. Si creeu un enllaç al voltant d'un text dins d'un paràgraf, aquest enllaç romandrà en línia amb la resta del text i no es dividirà en cap línia nova. Això es deu al fet que l'element {{htmlelement("a")}} és <code>display: inline</code> per defecte.</p>
+
+<p>Pots canviar aquest comportament de visualització per defecte. Per exemple, l'element {{htmlelement("li")}} és <code>display: block</code> per defecte, és a dir, que els elements de la llista es mostren l'un a sota de l'altre al nostre document en català. Si canviem el valor de <code>display</code> a <code>inline</code>, ara es mostraran un al costat de l’altre, com ho farien les paraules en una frase. El fet que puguis canviar el valor de <code>display</code> de qualsevol element significa que pots triar elements HTML pel seu significat semàntic, sense preocupar-te de com quedaran. La seva aparença és una cosa que es pot canviar.</p>
+
+<p>A més de poder canviar la presentació predeterminada, canviant un element de <code>block</code> a <code>inline</code> i viceversa, hi ha alguns mètodes de disseny més grans que comencen com amb un valor de <code>display</code>. Tanmateix, quan els feu servir, generalment haureu d'invocar propietats addicionals. Els dos valors més importants per als nostres propòsits a l’hora de parlar del disseny són <code>display: flex</code> i <code>display: grid</code>.</p>
+
+<h2 id="Caixes_flexibles_Flexbox">Caixes flexibles (Flexbox)</h2>
+
+<p>Flexbox és el nom breu del <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">mòdul de disseny de caixa flexible</a>, dissenyat per facilitar-nos la distribució de les coses en una dimensió, sigui com a fila o com a columna. Per utilitzar flexbox, apliqueu <code>display: flex</code> a l'element pare dels elements que vulgueu disposar; tots els seus fills directes es converteixen en ítems flexibles. Ho podem veure en un exemple senzill.</p>
+
+<p>L'etiquetatge HTML següent ens proporciona un element contenidor, amb una classe <code>wrapper</code>, dins del qual hi ha tres elements {{htmlelement("div")}}. Per defecte, es mostrarien com a elements de bloc, un a sota de l’altre, al nostre document.</p>
+
+<p>Tanmateix, si afegim <code>display: flex</code> al pare, els tres elements ara es disposen en columnes. Això es deu al fet que es converteixen en ítems flexibles (<em>flex items</em>) i es veuen afectats per alguns valors inicials que flexbox estableix al contenidor flex. Es mostren en una fila, perquè el valor inicial de {{cssxref("flex-direction")}} establert al seu pare és <code>row</code>. Tots semblen estirar-se fins a l’alçada de l’element més alt, perquè el valor inicial de la propietat {{cssxref("align-items")}} establert al seu pare és <code>stretch</code>. Això significa que els ítems s’estenen fins a l’alçada del contenidor flex, que en aquest cas està definida per l’element més alt. Tots els articles s’alineen a l’inici del contenidor, deixant qualsevol espai addicional al final de la fila.</p>
+
+<div id="Flex_1">
+<div class="hidden">
+<h6 id="Flexbox_Example_1">Flexbox Example 1</h6>
+
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper &gt; div {
+    border-radius: 5px;
+    background-color: rgb(207,232,220);
+    padding: 1em;
+}
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: flex;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p>
+
+<p>A més de les propietats anteriors que es poden aplicar al contenidor flex, hi ha propietats que es poden aplicar als ítems flex. Aquestes propietats, entre altres coses, poden canviar la manera com es “flexionen” els ítems, cosa que els permet expandir-se i contraure’s per adaptar-se a l’espai disponible.</p>
+
+<p>Com a exemple senzill d'això, podem afegir la propietat {{cssxref ("flex")}} a tots els nostres elements fill, amb un valor d'<code>1</code>. Això farà que tots els ítems creixin i omplin el contenidor, en comptes de deixar espai al final. Si hi ha més espai, els elements s’ampliaran; si hi ha menys espai es tornaran més estrets. A més, si afegiu un altre element al marcatge, tots els elements es faran més petits per fer-hi espai; ajustaran la seva mida per ocupar la mateixa quantitat d’espai, sigui quin sigui.</p>
+
+<div id="Flex_2">
+<div class="hidden">
+<h6 id="Flexbox_Example_2">Flexbox Example 2</h6>
+
+<pre class="brush: css notranslate">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: flex;
+}
+
+.wrapper &gt; div {
+    flex: 1;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;One&lt;/div&gt;
+    &lt;div class="box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota: </strong>Aquesta ha estat una molt breu introducció al que és possible amb Flexbox. Per obtenir més informació, consulteu el nostre article de <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flexbox">Flexbox</a>.</p>
+</div>
+
+<h2 id="Disposició_en_graella_Grid">Disposició en graella (Grid)</h2>
+
+<p>Mentre que Flexbox està dissenyat per al disseny unidimensional, el disseny de quadrícula està pensat per a dues dimensions: alinear les coses en files i columnes.</p>
+
+<p>Una vegada més, podeu activar el disseny de quadrícula amb un valor específic de display - <code>display: grid</code>. L'exemple següent utilitza un marcatge similar a l'exemple de flex, amb un contenidor i alguns elements fills. A més d’utilitzar <code>display: grid</code>, també definim files i columnes al pare mitjançant les propietats {{cssxref("grid-template-rows")}} i {{cssxref("grid-template-columns")}}, respectivament. Hem definit tres columnes cadascuna d'<code>1fr</code> i dues files de <code>100px</code>. No necessito posar cap regla sobre els elements infantils; es col·loquen automàticament a les cel·les que ha creat la nostra graella.</p>
+
+<div id="Grid_1">
+<div class="hidden">
+<h6 id="Grid_example_1">Grid example 1</h6>
+
+<pre class="brush: css notranslate">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;One&lt;/div&gt;
+    &lt;div class="box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box3"&gt;Three&lt;/div&gt;
+    &lt;div class="box4"&gt;Four&lt;/div&gt;
+    &lt;div class="box5"&gt;Five&lt;/div&gt;
+    &lt;div class="box6"&gt;Six&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p>
+
+<p><span id="docs-internal-guid-06c574d0-7fff-ef3d-b16b-035c6b7961fe" 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;">Un cop tingueu una graella, podeu col·locar-hi explícitament els elements, en lloc de confiar en el comportament de la ubicació automàtica que acabem de veure. Al segon exemple que teniu a continuació hem definit la mateixa graella, però aquesta vegada amb tres elements fills. Hem definit la línia inicial i final de cada element mitjançant les propietats {{cssxref("grid-column")}} i {{cssxref("grid-row")}}. Això fa que els elements abastin diverses pistes.</span></p>
+
+<div id="Grid_2">
+<div class="hidden">
+<h6 id="Grid_example_2">Grid example 2</h6>
+
+<pre class="brush: css notranslate">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;One&lt;/div&gt;
+    &lt;div class="box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Aquests dos exemples són només una petita part de la potència del disseny de graella; per obtenir més informació, consulteu el nostre article sobre <a href="/ca/docs/Learn/CSS/Disseny_CSS/Graelles">Graelles (Grids)</a>.</p>
+</div>
+
+<p>La resta d'aquesta guia cobreix altres mètodes de disseny, que són menys importants per a les principals estructures de disseny de la pàgina, però que poden ajudar-vos a realitzar tasques específiques. En comprendre la naturalesa de cada tasca de disseny, aviat trobareu que, quan mireu un component concret del vostre disseny, el tipus de disseny més adequat sovint serà clar.</p>
+
+<h2 id="Elements_flotants_Floats">Elements flotants (<em>Floats</em>)</h2>
+
+<p>Flotar un element canvia el comportament d’aquest element i dels elements de nivell de bloc que el segueixen en un flux normal. L'element es mou cap a l'esquerra o cap a la dreta i s'elimina del flux normal i el contingut circumdant flota al voltant de l'element flotat.</p>
+
+<p>La propietat {{cssxref("float")}} té quatre valors possibles:</p>
+
+<ul>
+ <li><code>left</code>: fa flotar l'element a l'esquerra.</li>
+ <li><code>right</code>: fa flotar l'element a la dreta.</li>
+ <li><code>none</code>: no flota. Aquest és el valor predeterminat.</li>
+ <li><code>inherit</code>: especifica que el valor de la propietat <code>float</code> s'hereta de l'element pare.</li>
+</ul>
+
+<p>A l'exemple següent, flotem un <code>&lt;div&gt;</code> a l'esquerra i li donem un {{cssxref("margin")}}} per la dreta per apartar el text de l'element. Això ens dona l’efecte del text rodejant aquesta caixa i és la major part del que heu de saber sobre els elements flotants tal com s’utilitzen en el disseny web modern.</p>
+
+<div id="Float_1">
+<div class="hidden">
+<h6 id="Floats_example">Floats example</h6>
+
+<pre class="brush: css notranslate">body {
+    width: 90%;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+p {
+    line-height: 2;
+    word-spacing: 0.1rem;
+}
+
+.box {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. 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;
+
+</pre>
+
+<pre class="brush: css notranslate">
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Els <em>floats</em> s’expliquen completament a la nostra lliçó sobre les propietats <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flotadors">float i clear</a>. Abans de tècniques com Flexbox i Grid es feien servir <em>floats</em> com a mètode per crear dissenys de columnes. És possible que encara trobeu aquests mètodes al web; els tractarem a la lliçó sobre <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">mètodes de disseny heretats</a>.</p>
+</div>
+
+<h2 id="Tècniques_de_posicionament">Tècniques de posicionament</h2>
+
+<p>El posicionament us permet moure un element des d'on es col·locaria quan estigués en un flux normal a una altra ubicació. El posicionament no és un mètode per crear el disseny principal de la pàgina, sinó que es tracta més de gestionar i ajustar la posició d’elements específics de la pàgina.</p>
+
+<p>Tot i això, hi ha tècniques útils per a certs patrons de disseny que depenen de la propietat {{cssxref("position")}}. La comprensió del posicionament també ajuda a entendre el flux normal, i què significa moure un element fora del flux normal.</p>
+
+<p>Hi ha cinc tipus de posicionament principals, que hauries de conèixer:</p>
+
+<ul>
+ <li>El <strong>posicionament estàtic</strong> (<em><strong>static positioning</strong></em>) és el valor per defecte que té cada element; significa «posa l'element en la posició normal en el flux del disseny del document; res especial per veure aquí».</li>
+ <li>El <strong>posicionament relatiu</strong> (<em><strong>relative positioning</strong></em>) permet modificar la posició d'un element en la pàgina i moure’l en relació amb la seva posició en el flux normal, fins i tot fent que se superposi a altres elements de la pàgina.</li>
+ <li>El <strong>posicionament absolut</strong> (<em><strong>absolute positioning</strong></em>) elimina un element completament del flux normal de la pàgina, com si estigués disposat en una capa separada pròpia. A partir d'aquí, el podem fixar a una posició relativa respecte de les vores de l'element <code>&lt;html&gt;</code> de la pàgina (o l'element pare posicionat més proper). És útil per a crear efectes de disseny de pàgina complexos com ara caixes de tipus pestanya en què diferents panells de contingut es disposen els uns damunt dels altre i es mostren i oculten segons es vol, o panells d'informació que es disposen fora de la pantalla per defecte, però es poden fer lliscar cap a l’interior de la pantalla amb un control de tipus botó.</li>
+ <li>El <strong>posicionament fix</strong> (<strong>fixed positioning</strong>) és molt similar al posicionament absolut, excepte que fixa un element en relació amb la finestra de visualització del navegador, no amb un altre element. Això és útil per a crear efectes com ara un menú de navegació persistent, que sempre es manté al mateix lloc a la pantalla en desplaçar-se la resta del contingut.</li>
+ <li>El <strong>posicionament enganxós</strong> (<strong>sticky positioning</strong>) és un mètode de posicionament més recent que fa que un element actuï com si fos <code>position: static</code> fins que arriba a un desplaçament definit des de la finestra de visualització del navegador, moment en què passa a actuar com a <code>position: fixed</code>.</li>
+</ul>
+
+<h3 id="Un_exemple_senzill_de_posicionament">Un exemple senzill de posicionament</h3>
+
+<p>Per familiaritzar-te amb aquestes tècniques de disseny de pàgina, el mostrem un parell d'exemples ràpids. Tots els nostres exemples tenen el mateix codi HTML, que és el següent:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p class="positioned"&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;</pre>
+
+<p><span id="result_box" lang="ca">Apliquem a aquest codi HTML un estil predeterminat amb el codi CSS següent:</span></p>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}</pre>
+
+<p>La sortida que dona és la següent:</p>
+
+<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p>
+
+<h3 id="Posicionament_Relatiu_Relative_positioning">Posicionament Relatiu (<em>Relative positioning</em>)</h3>
+
+<p>El posicionament relatiu et permet desplaçar un element de la posició que tindria per defecte en flux normal. Això vol dir que pots assolir una tasca com ara moure una icona cap avall de manera que quedi alineada amb una etiqueta de text. Per fer-ho, podríem afegir la següent regla per afegir un posicionament relatiu:</p>
+
+<pre class="notranslate">.positioned {
+  position: relative;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} de <code>relative</code>; això no fa res per si mateix, de manera que també afegim les propietats {{cssxref("top")}} i {{cssxref("left")}}, que serveixen per a moure l'element afectat cap avall i cap a la dreta; això podria semblar el contrari del que s'esperava, però cal pensar que l'element és empès des dels costats esquerre i superior, cosa que fa que es mogui cap a la dreta i avall.</p>
+
+<p>Si afegeixes aquest codi, es mostra el resultat següent:</p>
+
+<div class="hidden">
+<h6 id="Un_exemple_de_posicionament_relatiu">Un exemple de posicionament relatiu</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Relative positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p class="positioned"&gt;This is my relatively positioned element.&lt;/p&gt;
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: relative;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Relative_positioning_example', '100%', 300) }}</p>
+
+<h3 id="Posicionament_absolut_Absolute"><span id="result_box" lang="ca">Posicionament absolut</span> (Absolute)</h3>
+
+<p>El posicionament absolut s’utilitza per eliminar completament un element del flux normal i col·locar-lo mitjançant desplaçaments des de les vores d’un bloc contenidor.</p>
+
+<p>Tornant al nostre exemple original no posicionat, podríem afegir la regla CSS següent per a implementar el posicionament absolut:</p>
+
+<pre class="brush: css notranslate">.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} d'<code>absolute</code>, i les mateixes propietats {{cssxref("top")}} i {{cssxref("left")}}, com abans. L'addició d'aquest codi, però, dona el resultat següent:</p>
+
+<div class="hidden">
+<h6 id="Absolute_positioning_example">Absolute positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Absolute positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p class="positioned"&gt;This is my absolutely positioned element.&lt;/p&gt;
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Absolute_positioning_example', '100%', 300) }}</p>
+
+<p>Això és molt diferent. L'element ha quedat totalment separat de la resta del disseny de la pàgina i s’hi ha col·locat a sobre en l’extrem superior. Els altres dos paràgrafs ara es disposen junts, com si el germà posicionat no existís. Les propietats {{cssxref("top")}} i {{cssxref("left")}} tenen un efecte diferent sobre elements amb posicionament absolut que sobre elements amb posicionament relatiu. En aquest cas, s'especifica la distància a la qual l'element s’ha de situar dels costats superior i esquerre de la pàgina. És possible canviar l'element pare que es converteix en aquest contenidor i ho veurem a la lliçó sobre <a href="/ca/docs/Learn/CSS/Disseny_CSS/Posicionament">posicionament</a>.</p>
+
+<h3 id="Posicionament_fix_fixed_positioning">Posicionament fix (fixed positioning)</h3>
+
+<p>El posicionament fix elimina el nostre element del flux de documents de la mateixa manera que el posicionament absolut. Tanmateix, en lloc d'aplicar els desplaçaments des del contenidor, s'apliquen des de la finestra gràfica. Com que l'element es manté fix en relació amb la finestra gràfica, podem crear efectes com un menú que es manté fix a mesura que la pàgina es desplaça per sota.</p>
+
+<p>Per a aquest exemple, el nostre HTML inclou tres paràgrafs de text, per tal que puguem fer que la pàgina es desplaci, i un quadre al qual donarem <code>position: fixed</code>.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fixed&lt;/div&gt;
+
+&lt;p&gt;Paragraph 1.&lt;/p&gt;
+&lt;p&gt;Paragraph 2.&lt;/p&gt;
+&lt;p&gt;Paragraph 3.&lt;/p&gt;
+</pre>
+
+<div id="Fixed_1">
+<div class="hidden">
+<h6 id="Fixed_positioning_example">Fixed positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fixed&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. 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;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. 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;
+
+</pre>
+
+<pre class="brush: css notranslate">body {
+    width: 500px;
+    margin: 0 auto;
+}
+
+.positioned {
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p>
+
+<h3 id="Posicionament_enganxós_sticky_positioning">Posicionament enganxós (sticky positioning)</h3>
+
+<p>El posicionament enganxós és el mètode de posicionament final que tenim a la nostra disposició. Combina el posicionament estàtic per defecte amb el posicionament fix. Quan un element té <code>position: sticky</code>, es desplaçarà en flux normal fins que arribi al desplaçament sobre la finestra de visualització del navegador que definit. En aquest moment es queda "enganxat" com si tingués <code>position: fixed</code> aplicat.</p>
+
+<div id="Sticky_1">
+<div class="hidden">
+<h6 id="Sticky_positioning_example">Sticky positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. 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;div class="positioned"&gt;Sticky&lt;/div&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;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. 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;       </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+.positioned {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> per aprendre més sobre posicionament, aneu a l'article sobre <a href="/ca/docs/Learn/CSS/Disseny_CSS/Posicionament">posicionament</a>.</p>
+</div>
+
+<h2 id="Taules_CSS">Taules CSS</h2>
+
+<p>Les taules HTML són perfectes per a mostrar dades tabulades, però fa molts anys, fins i tot abans que el CSS bàsic fos compatible de manera fiable entre els navegadors, els desenvolupadors web solien utilitzar taules per als dissenys de pàgines web senceres; col·locaven els encapçalaments, els peus de pàgina, les diferents columnes, etc., en files i columnes d’una taula. Això va funcionar en el moment, però presenta molts problemes: els dissenys de taules no són flexibles, l’etiquetatge és feixuc, són difícils de depurar, i són semànticament erronis (els usuaris de lectors de pantalla, per exemple, tenen problemes per navegar en dissenys de pàgina web amb taules).</p>
+
+<p>La forma en què es mostra una taula en una pàgina web quan utilitzeu el marcatge de taula es deu a un conjunt de propietats CSS que defineixen el disseny de la taula. Aquestes propietats es poden utilitzar per disposar elements que no són taules, un ús que de vegades es descriu com "utilitzar taules CSS".</p>
+
+<p>L'exemple següent mostra un d'aquests usos; L'ús de taules CSS per al disseny s'hauria de considerar un mètode heretat en aquest moment, per a aquelles situacions en què tingueu navegadors molt antics sense compatibilitat amb Flexbox o Grid.</p>
+
+<p>Vegem-ne un exemple. Primer, un marcatge senzill que crea un formulari HTML. Cada element d'entrada té una etiqueta i també hem inclòs un text dins d'un paràgraf. Cada parell label/input està envoltat d'un element {{htmlelement("div")}}, amb finalitats de disseny.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;First of all, tell us your name and age.&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;First name:&lt;/label&gt;
+    &lt;input type="text" id="fname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Last name:&lt;/label&gt;
+    &lt;input type="text" id="lname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="age"&gt;Age:&lt;/label&gt;
+    &lt;input type="text" id="age"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Ara afegim el CSS al nostre exemple. La major part del CSS és bastant comú, excepte els usos de la propietat {{cssxref("display")}}. A l’element {{htmlelement("form")}} i als elements {{htmlelement("div")}}, {{htmlelement("label")}} i {{htmlelement("input")}} se'ls hi ha dit que es mostrin com una taula, files de la taula i cel·les de la taula, respectivament; bàsicament actuaran com un marcatge de taula HTML que alinea les etiquetes de text i les entrades de manera predeterminada. Tot el que hem de fer és afegir una mica de mida, marges, etc. perquè tot es vegi una mica més agradable, i ja haurem acabat.</p>
+
+<p>Observa que s’ha assignat al paràgraf de descripció (<em>caption</em>) la declaració <code>display: table-caption;</code>, que fa que aquest paràgraf actuï com un títol de taula ({{htmlelement("caption")}}), i també <code>caption-side: bottom;</code>, que indica que el títol es posa a la part inferior de la taula amb finalitats d'estil, encara que va abans de les entrades de la taula en l’ordre del codi d’origen. Això permet una mica de flexibilitat.</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}</pre>
+
+<p><span id="result_box" lang="ca">Això ens dona el resultat següent:</span></p>
+
+<p>{{ EmbedLiveSample('CSS_tables', '100%', '170') }}</p>
+
+<p>També pots veure aquest exemple en viu en el fitxer <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (i també consultar-ne el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">codi d’origen</a>).</p>
+
+<h2 id="Disseny_multicolumna">Disseny multicolumna</h2>
+
+<p>El mòdul de disseny de múltiples columnes ens proporciona una manera de distribuir contingut en columnes, de manera similar a com flueix el text en un diari. Tot i que la lectura de columnes cap amunt i cap avall és menys útil en un context web, ja que no voleu obligar els usuaris a desplaçar-se cap amunt i cap avall, la disposició del contingut en columnes pot ser una tècnica útil.</p>
+
+<p>Per convertir un bloc en un contenidor multicolumna, utilitzem la propietat {{cssxref("column-count")}}, que indica al navegador quantes columnes voldríem tenir o bé {{cssxref("column-width" )}}, que indica al navegador que ompli el contenidor amb tantes columnes d'almenys aquesta amplada.</p>
+
+<p>A l'exemple següent, comencem amb un bloc d'HTML dins d'un element <code>&lt;div&gt;</code> que conté una classe de <code>container</code>.</p>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+    &lt;h1&gt;Multi-column layout&lt;/h1&gt;
+
+    &lt;p&gt;Paragraph 1.&lt;/p&gt;
+    &lt;p&gt;Paragraph 2.&lt;/p&gt;
+
+&lt;/div&gt;</pre>
+
+<p>Utilitzem una <code>column-width</code> (amplada de columna) de 200 píxels en aquest contenidor, cosa que provoca que el navegador creï tantes columnes de 200 píxels com càpiguen al contenidor i, a continuació, comparteixi l’espai restant entre les columnes creades.</p>
+
+<div id="Multicol_1">
+<div class="hidden">
+<h6 id="Multicol_example">Multicol example</h6>
+
+<pre class="brush: html notranslate">    &lt;div class="container"&gt;
+        &lt;h1&gt;Multi-column Layout&lt;/h1&gt;
+
+        &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. 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;/div&gt;
+        </pre>
+
+<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre>
+</div>
+
+<pre class="brush: css notranslate">    .container {
+        column-width: 200px;
+    }</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p>
+
+<h2 id="Resum">Resum</h2>
+
+<p>Aquest article ha proporcionat un breu resum de totes les tecnologies de disseny que has de conèixer. Continua llegint per a obtenir més informació sobre cadascuna d’aquestes tecnologies!</p>
+
+<p>{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p>
diff --git a/files/ca/learn/css/css_layout/normal_flow/index.html b/files/ca/learn/css/css_layout/normal_flow/index.html
new file mode 100644
index 0000000000..ac44f6a95a
--- /dev/null
+++ b/files/ca/learn/css/css_layout/normal_flow/index.html
@@ -0,0 +1,95 @@
+---
+title: Flux normal
+slug: Learn/CSS/Disseny_CSS/Flux_normal
+translation_of: Learn/CSS/CSS_layout/Normal_Flow
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary">Aquest article explica el flux normal o la manera com es disposen els elements de la pàgina web si tu no en canvies la disposició.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisits:</th>
+   <td>Conceptes bàsics d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de com funciona el CSS (consulta la <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectiu:</th>
+   <td>Entendre la manera com els navegadors disposen per defecte els elements en les pàgines web abans que l'usuari comenci a fer-hi canvis.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Com es detalla en l’últim article d’introducció al disseny de pàgines web, els elements d’una pàgina web es distribueixen segons el flux normal si no s'hi aplica CSS que en canviï el comportament. Com ja hem començat a veure, pots canviar la manera com es comporten els elements, bé ajustant-ne la posició dins d’aquest flux normal, o bé suprimint-los-en del tot. Un document sòlid i ben estructurat que sigui llegible en el sentit del flux normal és la millor manera de començar qualsevol pàgina web. Garanteix que el contingut serà llegible, fins i tot si l’usuari fa servir un navegador molt limitat o un dispositiu com un lector de pantalla, que llegeix el contingut de la pàgina. A més, com que el flux normal està dissenyat per a fer llegible un document, començar d'aquesta manera significa que treballes amb el document en lloc de lluitar-hi en contra perquè hi fas canvis d’ordre.</p>
+
+<p>Abans d’aprofundir més en diferents mètodes de disseny, val la pena revisar algunes de les qüestions que has estudiat en mòduls anteriors pel que fa al flux normal dels documents.</p>
+
+<h2 id="Com_es_disposen_per_defecte_els_elements">Com es disposen per defecte els elements?</h2>
+
+<p>Primer de tot s'agafa el contingut dels elements de les caixes, i a continuació s’hi afegeixen l'àrea de farciment, les vores i els marges al voltant. Es tracta del model de caixes, que ja coneixem.</p>
+
+<p>De manera predeterminada, el contingut d'un <a href="/ca/docs/Web/HTML/Block-level_elements">element de nivell de bloc</a> és del 100% de l'amplada de l’element pare, i l‘alçada està determinada pel contingut. Els <a href="/ca/docs/Web/HTML/Elements_en_línia">elements de línia</a> tenen l’amplada i l’alçada determinades pel contingut. En els elements de línia no pots establir l’amplada i l’alçada, senzillament s’inclouen dins del contingut d’elements de nivell de bloc. Si vols controlar la mida d'un element de línia d'aquesta manera, has de configurar-lo perquè es comporti com un element de nivell de bloc amb <code>display: block;</code> (o fins i tot, <code>display: inline-block;</code>, que barreja característiques de tots dos).</p>
+
+<p>Això pel que fa a elements individuals; però què passa amb la manera com interactuen els elements entre ells? El flux normal del disseny d’una pàgina web (que s’esmenta en l’article d’introducció al disseny de pàgines web) és el sistema pel qual els elements s’ubiquen dins de la finestra gràfica del navegador. Per defecte, els elements de nivell de bloc estan configurats en la <em>direcció del flux dels blocs</em>, en funció del <a href="/en-US/docs/Web/CSS/writing-mode">mode d'escriptura</a> de l’element pare (<em>inicialment</em>: en horitzontal): cada element de bloc apareix en una línia nova per sota de l’anterior i estan separats per qualsevol marge que s’hi hagi establert. Per tant, en català, o en qualsevol altre sistema d'escriptura horitzontal i de dalt a baix, els elements de nivell de bloc es disposen verticalment.</p>
+
+<p>Els elements de línia es comporten de manera diferent: no es disposen en línies noves; en lloc d’això, es disposen sobre la mateixa línia que l’anterior i que qualsevol contingut textual contigu (o que el delimiti), mentre hi hagi espai dins de l’amplada de l’element pare de nivell de bloc. Quan ja no hi ha espai, el text o els elements que desborden passen a una línia nova.</p>
+
+<p>Si dos elements adjacents tenen configurat un marge i els marges dels dos es toquen, predomina el que és més gran, i el més petit desapareix; es diu que els marges col·lapsen, i això també ho coneixem.</p>
+
+<p>Vegem un exemple senzill que il·lustra tot això:</p>
+
+<div id="Normal_Flow">
+<pre class="brush: html">&lt;h1&gt;Flux bàsic d’un document&lt;/h1&gt;
+
+&lt;p&gt;Sóc un element de nivell de bloc bàsic. Els meus elements de nivell de bloc adjacents es distribueixen en línies noves per sota meu.&lt;/p&gt;
+
+&lt;p&gt;Per defecte ocupem el 100% de l'amplada de l'element pare i som tan alts com el contingut dels nostres elements fill. L‘amplada i l’alçada total són el nostre contingut + l’àrea de farciment + l’amplada/alçada de la vora.&lt;/p&gt;
+
+&lt;p&gt;Tenim marges que ens separen. Però pel col·lapse dels marges, ens separa només l'amplada d'un dels dos marges, però no l’amplada dels dos.&lt;/p&gt;
+
+&lt;p&gt;Els elements de línia &lt;span&gt; com aquest &lt;/span&gt; i &lt;span&gt; aquest &lt;/span&gt; es disposen sobre la mateixa línia que els altres i que els nodes de text adjacents, si hi ha espai en la mateixa línia. Quan els elements de línia desborden, &lt;span&gt;continuen per la línia següent, si és possible (com el que conté aquest text)&lt;/span&gt;; o si no és possible, passen a una línia nova, com és el cas d’aquesta imatge: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p>
+
+<h2 id="Resum">Resum</h2>
+
+<p>Ara que saps com funciona el flux normal del disseny de pàgina i quines són les opcions que el navegador estableix per defecte, avança i descobreix com pots canviar aquesta visualització per defecte i crear la composició de pàgina que necessita el teu disseny de pàgina web.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="En_aquest_mòdul">En aquest mòdul</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducció al disseny amb CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">El flux normal de disposició</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Graella</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotació</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionament</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disseny en diverses columnes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">El disseny adaptatiu</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guia d’iniciació a les consultes dels mèdia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Mètodes de disposició heretats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilitat amb navegadors antics</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Avaluació del conjunt d’elements bàsics de compaginació</a></li>
+</ul>
diff --git a/files/ca/learn/css/css_layout/positioning/index.html b/files/ca/learn/css/css_layout/positioning/index.html
new file mode 100644
index 0000000000..213293ff4e
--- /dev/null
+++ b/files/ca/learn/css/css_layout/positioning/index.html
@@ -0,0 +1,467 @@
+---
+title: Posicionament
+slug: Learn/CSS/Disseny_CSS/Posicionament
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Guide
+  - Layout
+  - Positioning
+  - absolute
+  - fixed
+  - relative
+translation_of: Learn/CSS/CSS_layout/Positioning
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">El posicionament permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseient-se un damunt de l'altre o mantenint-se sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de {{cssxref("position")}}, i com utilitzar-los.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisits previs:</th>
+   <td><span id="result_box" lang="ca"><span>Conceptes bàsics d'HTML</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a>), <span id="result_box" lang="ca"><span>i una idea de com funciona CSS</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectiu:</th>
+   <td>Aprendre com funciona el posicionament CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Flux_del_document"><span id="result_box" lang="ca"><span>Flux del document</span></span></h2>
+
+<p>El posicionament és un tema bastant complex, per tant, abans de submergir-nos en el codi, anem a revisar i ampliar una mica de teoria de disseny per donar-nos una idea de com funciona això.</p>
+
+<p>En primer lloc, les caixes d'elements individuals es defineixen tenint en compte el contingut dels elements, afegint-hi qualsevol farciment, vora i marge al voltant d'ells - és a dir, aquell <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">model de caixa</a> nou, que vam mirar abans. Per defecte, el contingut d'un element de nivell de bloc és del 100% de l'ample de l'element pare i tan alt com el seu contingut. Els elements en línia són tan alts  i tan amples com el seu contingut. No es pot definir l'ample o alçada en elements en línia - simplement s'assenten dins del contingut dels elements de nivell de bloc. Si es vol controlar la mida d'un element en línia d'aquesta manera, s'ha d'establir perquè es comporti com un element de nivell de bloc amb <code>display: block;</code>.</p>
+
+<p>Això explica els elements individuals, però què passa amb els elements que interactuen els uns amb els altres? El <strong>flux de disseny normal</strong> (esmentat en l'article de presentació de disseny) és el sistema mitjançant el qual es col·loquen els elements dins de la finestra de visualització del navegador. De manera predeterminada, els elements de nivell de bloc es distribueixen verticalment a la finestra de visualització: cadascun d'ells apareixerà en una nova línia,per sota d l'última i se separaran per qualsevol marge que s'estableixi en ells.</p>
+
+<p>Els elements en línia es comporten de manera diferent - no apareixen en noves línies; en canvi, s'assenten en la mateixa línia que els altres i amb qualsevol contingut de text adjacent (o embolicat), sempre que hi hagi espai perquè ho facin dins de l'amplada de l'element a nivell de bloc pare. Si no hi ha espai, el text desbordat o els elements es desplacen cap a una nova línia.</p>
+
+<p>Si dos elements adjacents tenen un marge establert i els dos marges es toquen, el més gran dels dos es queda i el més petit desapareix - això es diu <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">col.lapsació del marge</a>, i també ho hem conegut abans.</p>
+
+<p>Vegem un exemple senzill que expliqui tot això:</p>
+
+<pre class="brush: html">&lt;h1&gt;Basic document flow&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will &lt;span&gt;wrap onto a new line if possible (like this one containing text)&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}</pre>
+
+<p>{{ EmbedLiveSample('Document_flow', '100%', 500) }}</p>
+
+<p>Revisarem aquest exemple diverses vegades al llarg d'aquest article, ja que mostrarem els efectes de les diferents opcions de posicionament disponibles per a nosaltres.</p>
+
+<p>Ens agradaria que seguíssiu els exercicis en el vostre ordinador, si és possible - agafeu una còpia de <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> del nostre repositori de Github (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">codi font aquí</a>) i utilitzeu-lo com a punt de partida.</p>
+
+<h2 id="Introducció_al_posicionament">Introducció al posicionament</h2>
+
+<p>Tota la idea del posicionament és permetre'ns anul·lar el comportament bàsic del flux de documents descrit anteriorment, per produir efectes interessants. Què passa si voleu canviar lleugerament la posició d'algunes caixes dins d'un disseny des de la seva posició de flux de disseny per defecte, per donar-li un toc lleugerament peculiar i molest? El posicionament és la vostra eina. O si voleu crear un element d'interfície d'usuari que floti a la part superior d'altres parts de la pàgina i/o sempre es trobi al mateix lloc dins de la finestra del navegador, sense importar quant es desplaça la pàgina? El posicionament fa possible aquest treball de disseny.</p>
+
+<p>Hi ha una sèrie de diferents tipus de posicionament que podeu implementar en elements HTML. Per fer un tipus específic de posicionament actiu en un element, utilitzem la propietat {{cssxref("position")}}.</p>
+
+<h3 id="Posicionament_estàtic_(Static)"><span id="result_box" lang="ca"><span>Posicionament estàtic</span></span> (Static)</h3>
+
+<p>El posicionament estàtic és el valor predeterminat que cada element obté - significa "posar l'element en la seva posició normal en el flux del disseny del document - res especial per veure aquí".</p>
+
+<p>Per demostrar això i preparar el vostre exemple per a futures seccions, primer afegiu una <code>class</code> de <code>positioned</code> al segon {{htmlelement("p")}} en l'HTML:</p>
+
+<pre class="brush: html">&lt;p class="positioned"&gt; ... &lt;/p&gt;</pre>
+
+<p><span id="result_box" lang="ca"><span>Ara afegiu la següent regla a la part inferior del vostre CSS:</span></span></p>
+
+<pre class="brush: css">.positioned {
+   position: static;
+  background: yellow;
+}</pre>
+
+<p>Si ara deseu i actualitzeu, no veureu cap diferència en absolut, excepte el color de fons actualitzat del segon paràgraf. Està bé - com hem dit abans, el posicionament estàtic és el comportament predeterminat!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">vegeu el codi font</a>).</p>
+</div>
+
+<h3 id="Posicionament_relatiu_(Relative)">Posicionament relatiu (Relative)</h3>
+
+<p>El posicionament relatiu és el primer tipus de posició que veurem. Això és molt semblant al posicionament estàtic, tret que una vegada que l'element posicionat ha tingut el seu lloc en el flux de disseny normal, podeu modificar la seva posició final, incloent-hi la superposició d'altres elements a la pàgina. Seguiu i actualitzeu la declaració de posició del vostre codi:</p>
+
+<pre class="brush: css">position: relative;</pre>
+
+<p>Si deseu i actualitzeu en aquesta etapa, no veureu cap canvi en el resultat en absolut, així, com modifiqem la posició de l'element? Heu d'utilitzar les propietats {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} , Que explicarem en la següent secció.</p>
+
+<h3 id="Introduir_top_bottom_left_i_right">Introduir top, bottom, left i right</h3>
+
+<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} s'utilitzen juntament amb {{cssxref("position")}} per especificar exactament a on moure l'element posicionat. Per provar-ho, afegiu les següents declaracions a la regla <code>.positioned</code> al vostre CSS:</p>
+
+<pre>top: 30px;
+left: 30px;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>:<span id="ouHighlight__0_2TO0_2"> Els</span><span id="noHighlight_0.1974495154842031"> </span><span id="ouHighlight__4_9TO4_9">valors</span><span id="noHighlight_0.85891676862169"> </span><span class="highlighted" id="ouHighlight__14_18TO11_20">d'aquestes</span><span id="noHighlight_0.11330426706729768"> </span><span id="ouHighlight__20_29TO22_31">propietats</span><span id="noHighlight_0.18392821958485306"> </span><span id="ouHighlight__31_33TO33_35">pot</span><span id="noHighlight_0.9676838165776446"> </span><span id="ouHighlight__35_38TO37_43">prendre</span><span id="noHighlight_0.037568817284082345"> </span><span id="ouHighlight__40_42TO45_49">totes</span><span id="noHighlight_0.9017348693534137"> les </span><span id="ouHighlight__44_48TO55_61">unitats</span><span id="noHighlight_0.831725614209524"> que </span><span id="ouHighlight__66_71TO67_77">s'esperaria</span><span id="noHighlight_0.2590131286870444"> </span><span id="ouHighlight__56_64TO79_88">lògicament</span> - píxels, mm, rems,%, etc.</p>
+</div>
+
+<p>Si ara deseu i actualitzeu, obtindreu un resultat com aquest:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Relative positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: relative;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}</p>
+
+<p>Genial, eh? D'acord, aixó es probablement el que no esperaves: per què s'ha mogut a la part inferior i la dreta si s'especificat a dalt i a l'esquerra? Pot sonar Il·lògic inicialment, però aquesta és la forma en què funciona el posicionament relatiu: cal pensar en una força invisible que empeny el costat de la caixa posicionada, movent-la en la direcció oposada. Així, per exemple, si especifiqueu un <code>top: 30px;</code>, una força empeny la part superior de la caixa, fent que es mogui cap avall en 30px.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">vegeu el codi font</a>).</p>
+</div>
+
+<h3 id="Posicionament_absolut_(Absolute)"><span id="result_box" lang="ca"><span>Posicionament absolut (</span></span>Absolute)</h3>
+
+<p>El posicionament absolut porta resultats molt diferents. Intenteu canviar la declaració de posició del vostre de la manera següent:</p>
+
+<pre>position: absolute;</pre>
+
+<p>Si ara deseu i actualitzeu, obtindreu un resultat com aquest:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Absolute positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;Now I'm absolutely positioned, I'm not playing by the rules any more!&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}</p>
+
+<p>En primer lloc, tingueu en compte que el buit on l'element posicionat hauria d'estar en el flux del document ja no hi és - el primer i el tercer element s'han tancat junts, com que ja no existeix!. Bé, en certa manera, això és cert. Un element absolutament posicionat ja no existeix en el flux de disseny normal del document. En lloc d'això, s'asseu a la seva pròpia capa separada de tota la resta. Això és molt útil - vol dir que podem crear funcions d'interfície d'usuari aïllades que no interfereixin amb la posició d'altres elements de la pàgina - per exemple, les caixes d'informació emergents i els menús de control, els panells de rollover, les funcions d'interfície d'usuari que es poden arrossegar i deixar anar a qualsevol lloc en la pàgina, i així successivament.</p>
+
+<p>En segon lloc, observeu que la posició de l'element ha canviat - això es deu al fet que {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} es comporten d'una manera diferent amb el posicionament absolut. En lloc d'especificar la direcció en què l'element s'ha de moure, especifiquen la distància que ha de tenir l'element en cada costat dels elements que contingui. Així que, en aquest cas, estem dient que l'element absolutament posicionat hauria de situar-se 30px des de la part superior del "element que conté" i 30px des de l'esquerra.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Podeu utilitzar {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} per canviar la mida dels elements si és necessari. Intenteu establir <code>top: 0; bottom: 0; left: 0; right: 0;</code> and <code>margin: 0;</code> en els elements posicionats i veureu què passa! Torneu a posar-ho de nou després...</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Sí, els marges encara afecten els elements posicionats. Tanmateix, el col·lapse de marges no existeix.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">vegeu el codi font</a>).</p>
+</div>
+
+<h3 id="Contextos_de_posicionament"><span id="result_box" lang="ca"><span>Contextos de posicionament</span></span></h3>
+
+<p>Quin element és el "element que conté" un element absolutament posicionat? Per defecte, és l'element {{htmlelement("html")}} - l'element posicionat està niat dins del {{htmlelement("body")}} en la font HTML, però en el disseny final, es troba a 30px de distància des de la part superior i esquerra de la vora de la pàgina, que és l'element {{htmlelement("html")}}. Això s'anomena més exactament com a <strong>context de posicionament</strong> de l'element.</p>
+
+<p>Podem canviar el <strong>context de posicionament</strong> - quin element posiciona l'element absolutament posicionat en relació a. Això es fa establint el posicionament en un dels altres avantpassats del element - un dels elements que està niat a l'interior (no es pot col·locar en relació amb un element que no està niat a l'interior). Per demostrar-ho, afegiu la següent declaració a la regla del cos:</p>
+
+<pre>position: relative;</pre>
+
+<p><span class="short_text" id="result_box" lang="ca"><span>Això hauria de donar el següent resultat:</span></span></p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Positioning context&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}</p>
+
+<p>L'element posicionat ara es troba en relació amb l'element {{htmlelement("body")}}.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">vegeu el codi font</a>).</p>
+</div>
+
+<h3 id="Introducció_a_z-index">Introducció a z-index</h3>
+
+<p>Tot aquest posicionament absolut és una bona diversió, però hi ha una altra cosa que encara no hem considerat - quan els elements comencen a superposar-se, què determina que uns elements apareguin sobre quins altres elements? En l'exemple que hem vist fins ara, només tenim un element posicionat en el context de posicionament, i apareix a la part superior, ja que els elements posicionats guanyen elements no posicionats. Què passa quan tenim més d'un?</p>
+
+<p>Intenteu afegir el següent, al vostre CSS, perquè el primer paràgraf estigui absolutament posicionat també:</p>
+
+<pre>p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}</pre>
+
+<p>En aquest punt, veureu el primer paràgraf de color verd, desplaçat del flux del document i colocat una mica per sobre d'on era originalment. També s'apil·la a sota del paràgraf original .positioned, on els dos es superposen. Això és degut a que el paràgraf <code>.positioned</code> és el segon paràgraf de l'ordre d'origen, i els elements posicionats més endavant en l'ordre d'origen guanyen sobre els elements posicionats anteriorment en l'ordre d'origen.</p>
+
+<p>Es pot canviar l'ordre d'apilament? Sí, podeu fer-ho, utilitzant la propietat {{cssxref("z-index")}}. "z-index" és una referència a l'eix z. Recordareu que en punts anteriors, en la font, parlàvem de la utilització en pàgines web de coordenades horitzontals (eixos x) i verticals (eixos-y) per tal de determinar el posicionament de coses com ara imatges de fons i desplaçaments d'ombra. (0,0) es troba a la part superior esquerra de la pàgina (o element), i els eixos x i y es desplaçan cap a la dreta i avall de la pàgina (per als idiomes d'esquerra a dreta, de totes maneres).</p>
+
+<p>Les pàgines web també tenen un eix z - una línia imaginària que s'estén des de la superfície de la pantalla, cap a la nostra cara (o el que vulgueu tenir davant de la pantalla). Els valors de {{cssxref("z-index")}} afecten on els elements posicionats se situen en aquest eix; els valors positius els mouen més amunt per la pila, i els valors negatius els mouen més avall a la pila. De manera predeterminada, els elements posicionats tenen un z-index d'auto, que és efectivament 0.</p>
+
+<p>Per canviar l'ordre d'apilament, proveu d'afegir la següent declaració a la vostra regla <code>p:nth-of-type(1)</code>:</p>
+
+<pre>z-index: 1;</pre>
+
+<p><span class="short_text" id="result_box" lang="ca"><span>Ara hauríeu de veure l'exemple acabat:</span></span></p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;z-index&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+
+p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+  z-index: 1;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}</p>
+
+<p>Tingueu en compte que <code>z-index</code> només accepta valors d'índex, sense unitat; No podeu especificar que desitgeu que un element tingui 23 píxels a dalt de l'eix Z - no funciona així. Els valors més alts van per sobre dels valors inferiors, i depèn de vosaltres quins valors utilitzar. L'ús de 2 i 3 donaria el mateix efecte que 300 i 40000.</p>
+
+<p>Tingueu en compte que aquí només hem tractat un únic context de posicionament. Si tinguéssiu dos conjunts separats d'elements posicionats a la mateixa pàgina, i volguéssiu que es  superposessin i que l'ordre d'apilament funcionés d'una manera específica, les coses es complicarien. Afortunadament, molt poques vegades trobareu tal complexitat amb z-index. Si voleu llegir amb molt més detall sobre com funciona exactament z-index, consulteu la <a href="https://www.w3.org/community/webed/wiki/CSS_absolute_and_fixed_positioning#The_third_dimension.E2.80.94z-index">Web Standards Curriculum z-index writeup</a>. En aquest article us hem proporcionat tot el que necessiteu saber en aquesta etapa del vostre aprenentatge.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">vegeu el codi font</a>).</p>
+</div>
+
+<h3 id="Posicionament_Fixa_(Fixed)"><span id="result_box" lang="ca"><span>Posicionament Fixa (</span></span>Fixed)</h3>
+
+<p>Hi ha un altre tipus de posicionament a cobrir - fixed. Això funciona exactament igual que el posicionament absolut, amb una diferència clau - mentre que el posicionament absolut fixa un element en el lloc en relació amb l'element {{htmlelement("html")}} o seu més proper avantpassat posicionat, el posicionament fix fixa un element en el lloc en relació a la finestra de visualització del navegador. Això vol dir que podeu crear elements útils de la interfície d'usuari que es fixen en el lloc, com ara menús de navegació persistents.</p>
+
+<p>Fem un exemple senzill per mostrar el que volem dir. Abans de res, elimineu les regles existents <code>p:nth-of-type(1)</code> i <code>.positioned</code> del vostre CSS.</p>
+
+<p>Ara, actualitzeu la regla del cos per eliminar la declaració <code>position: relative;</code> i afegiu una alçada fixa, com aixó:</p>
+
+<pre>body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}</pre>
+
+<p>Ara donarem a l'element {{htmlelement("h1")}} <code>position: fixed;</code>, i aconseguirem que s'assegui en el centre superior de la finestra de visualització. Afegiu la regla següent al vostre CSS:</p>
+
+<pre>h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}</pre>
+
+<p>El <code>top: 0;</code> és necesari per fer que s'adhereixi a la part superior de la pantalla; Donem a l'encapçalament el mateix ample que la columna de contingut i utilitzarem el fidel antic <code>margin: 0 auto;</code> com a truc per centrar-ho. A continuació, li donem un fons blanc i algun farcit, de manera que el contingut no estigui visible per sota d'ell.</p>
+
+<p>Si deseu i actualitzeu ara, veureu un petit efecte divertit pel qual l'encapçalament es manté fix, i el contingut apareix en desplaçar-se cap amunt i desaparèixer per sota d'ell. Però podríem millorar més, això - de moment, alguns dels continguts començan per sota de l'encapçalament, perquè el encapçalament posicionat ja no apareix en el flux del document, de manera que la resta del contingut es mou cap amunt. Necessitem moure-ho tot cap avall una mica; podem fer-ho establint un marge superior al primer paràgraf. Afegiu-ho ara:</p>
+
+<pre>p:nth-of-type(1) {
+  margin-top: 60px;
+}</pre>
+
+<p><span class="short_text" id="result_box" lang="ca"><span>Ara hauríeu de veure l'exemple acabat:</span></span></p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;I'm not positioned any more...&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+h1 {
+  position: fixed;
+  top: 0px;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+
+p:nth-of-type(1) {
+  margin-top: 60px;
+}</pre>
+
+<p> </p>
+</div>
+
+<p>{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">vegeu el codi font</a>).</p>
+</div>
+
+<h3 id="Experimental_posició_adherent_(sticky)">Experimental: posició adherent (sticky)</h3>
+
+<p>Hi ha un nou valor de posicionament disponible anomenat <code>position: sticky</code>, el suport del mateix no està molt estès. Aquest és bàsicament un híbrid entre una posició relativa i una fixa, que permet que un element posicionat actuï com si estigués relativament posicionat fins que es desplaci a un determinat llindar (per ex., 10px des de la part superior de la finestra de visualització), i després es torna fix.  Vegeu la nostra <a href="/en-US/docs/Web/CSS/position#Sticky_positioning">entrada de referéncia de position: sticky</a> per més detalls i un exemple.</p>
+
+<h2 id="Resum">Resum</h2>
+
+<p>Estic segur que us heu divertir jugant amb el posicionament bàsic - és una de les eines essencials que està darrera en le creació de complexos dissenys CSS i funcions d'interfície d'usuari. Tenint en compte això, en el proper article tindrem encara més diversió amb el posicionament, allà anirem un pas més enllà i començarem a construir algunes coses útils del món real amb ell.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</p>
diff --git a/files/ca/learn/css/css_layout/practical_positioning_examples/index.html b/files/ca/learn/css/css_layout/practical_positioning_examples/index.html
new file mode 100644
index 0000000000..dfaac7f63c
--- /dev/null
+++ b/files/ca/learn/css/css_layout/practical_positioning_examples/index.html
@@ -0,0 +1,404 @@
+---
+title: Exemples pràctics de posicionament
+slug: Learn/CSS/Disseny_CSS/Exemples_pràctics_posicionament
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Guide
+  - Layout
+  - Learn
+  - absolute
+  - fixed
+  - relative
+translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">Amb els fonaments del posicionament coberts en l'últim article, ara veurem com crear alguns exemples del món real, per il·lustrar quin tipus de coses podeu fer amb el posicionament.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisits previs:</th>
+   <td><span id="result_box" lang="ca"><span>Conceptes bàsics d'HTML</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a>), <span id="result_box" lang="ca"><span>i una idea de com funciona CSS</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectiu:</th>
+   <td>Tenir una idea dels aspectes pràctics del posicionament</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Una_caixa_d'informació_amb_pestanyes"><span id="result_box" lang="ca"><span>Una caixa d'informació amb pestanyes</span></span></h2>
+
+<p>El primer exemple que veurem és una caixa d'informació amb pestanyes clàssica - una característica molt freqüent que es fa servir quan voleu empaquetar molta informació en una petita àrea. Això inclou aplicacions de gran abast d'informació, com ara jocs d'estratègia/guerra, versions mòbils de llocs web on la pantalla és estreta i l'espai és limitat, i caixes d'informació compactes on és possible que vulgueu tenir molta informació disponible sense haver d'omplir tota la IU. El nostre senzill exemple es veurà així una vegada que hàgim acabat:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Podeu veure l'exemple acabat executant-ho en directa a <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">codi font</a>). Consulteu-ho per tenir una idea del que estareu construint en aquesta secció de l'article.</p>
+</div>
+
+<p>Podeu estar pensant "per què no crear les pestanyes separades com a pàgines web independents, i només les pestanyes, fent clic a través de les pàgines independents per crear l'efecte?" Aquest codi seria més senzill, sí, però cada visualització de "pàgina" per separat seria en realitat una pàgina web recentment carregada, la qual cosa faria més difícil guardar la informació entre les vistes i integrar aquesta característica en un disseny de d'interfície d'usuari més gran. A més, les anomenades "aplicacions de pàgina única" s'estan tornant molt populars - especialment per a les d'interfície d'usuari web mòbils - ja que tenir tot el que serveix com un únic arxiu redueix el nombre de sol·licituds HTTP necessàries per visualitzar tot el contingut, millorant així el rendiment.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Alguns desenvolupadors web porten les coses encara més lluny, només tenen una pàgina d'informació carregada alhora i canvien dinàmicament la informació que es mostra utilitzant, una funció de JavaScript com <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. En aquest punt de l'aprenentatge, però, volem que les coses siguin tan simples com sigui possible. Hi ha una mica de JavaScript més endavant, però només una mica.</p>
+</div>
+
+<p>Per començar, ens agradaria que féssiu una còpia del fitxer HTML d'inici - <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. Deseu-lo en algun lloc sensible a l'ordinador i obrir-ho en el vostre editor de text. Vegem l'HTML contingut en el cos:</p>
+
+<pre class="brush: html">&lt;section class="info-box"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#" class="active"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;div class="panels"&gt;
+    &lt;article class="active-panel"&gt;
+      &lt;h2&gt;The first tab&lt;/h2&gt;
+
+      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.&lt;/p&gt;
+    &lt;/article&gt;
+    &lt;article&gt;
+      &lt;h2&gt;The second tab&lt;/h2&gt;
+
+      &lt;p&gt;This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.&lt;/p&gt;
+    &lt;/article&gt;
+    &lt;article&gt;
+      &lt;h2&gt;The third tab&lt;/h2&gt;
+
+      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!&lt;/p&gt;
+
+      &lt;ol&gt;
+        &lt;li&gt;dui neque eleifend lorem, a auctor libero turpis at sem.&lt;/li&gt;
+        &lt;li&gt;Aliquam ut porttitor urna.&lt;/li&gt;
+        &lt;li&gt;Nulla facilisi&lt;/li&gt;
+      &lt;/ol&gt;
+    &lt;/article&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</pre>
+
+<p>Així que aquí tenim un element {{htmlelement("section")}} amb una <code>class</code> <code>info-box</code>, que conté un {{htmlelement("ul")}} i un {{htmlelement("div")}}. La llista desordenada conté tres elements de llista amb enllaços a l'interior, que es convertiran en les pestanyes reals per fer clic, per visualitzar els nostres panells de contingut. El div conté tres elements {{htmlelement("article")}}, que formaran els panells de contingut que corresponen a cada pestanya. Cada panell conté alguns continguts d'exemple.</p>
+
+<p>La idea, aquí, és fer que l'estil de pestanyes pogui semblar-se a un menú estàndard de navegació horitzontal i donant-li estil els panells per a que s'asseguin un damunt de l'altre mitjançant el posicionament absolut. També us donarem una mica de JavaScript per incloure a la vostra pàgina, per mostrar el panell corresponent quan es pressiona una pestanya i l'estil de la pestanya en si. No necessitareu entendre el JavaScript en aquesta etapa, però haureu de pensar en aprendre una mica de <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> bàsic, el més aviat possible - com més complexes siguin les característiques de la vostra interfície d'usuari, més probable és que necessiteu implementar JavaScript a la vostra funcionalitat desitjada.</p>
+
+<h3 id="Configuració_general">Configuració general</h3>
+
+<p>Per començar, afegiu el següent entre l'obertura i tancament de les etiquetes {{HTMLElement("style")}}:</p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}</pre>
+
+<p>Aquesta és només una configuració general per establir una font sans-serif a la nostra pàgina, utilitzar el model <code>border-box</code> de {{cssxref("box-sizing")}} i desfer-se del marge predeterminat de {{htmlelement("body")}}.</p>
+
+<p>A continuació, afegiu el següent just a sota del vostre CSS anterior:</p>
+
+<pre class="brush: css">.info-box {
+  width: 450px;
+  height: 400px;
+  margin: 0 auto;
+}</pre>
+
+<p>Això estableix un ample i alçada específic sobre el contingut i el centra a la pantalla mitjançant el antic truc <code>margin: 0 auto;</code>. Anteriorment en el curs, vam aconsellar no establir una alçada fixa en contenidors de contingut, si fos possible; Està bé en aquesta circumstància, perquè tenim contingut fix en les nostres pestanyes. També sembla una mica discordant tenir diferents pestanyes a diferents alçades.</p>
+
+<h3 id="Estilitzar_les_nostres_pestanyes">Estilitzar les nostres pestanyes</h3>
+
+<p>Ara volem que les pestanyes d'estil semblin com a pestanyes - bàsicament, aquest és un menú de navegació horitzontal, però en comptes de carregar diferents pàgines web quan es fa clic, com hem vist prèviament al curs, fa que es mostrin panells diferents en la mateixa pàgina. Primer, afegiu la següent regla a la part inferior del vostre CSS per eliminar el valor predeterminat {{cssxref("padding-left")}} i {{cssxref("margin-top")}} de la llista no ordenada:</p>
+
+<pre class="brush: css">.info-box ul {
+  padding-left: 0;
+  margin-top: 0;
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Estem utilitzant selectors descendents amb <code>.info-box</code> al principi de la cadena a través d'aquest exemple - això és per poguer inserir aquesta funció en una pàgina amb un altre contingut ja en ella, sense por a interferir amb els estils aplicats a altres parts de la pàgina.</p>
+</div>
+
+<p>A continuació, dissenyarem les pestanyes horitzontals - els elements de la llista es flotant tots cap a l'esquerra per fer que s'asseguin en una sola línia, el seu {{cssxref("list-style-type")}} s'estableix a <code>none</code> per desfer-se de les vinyetes i el seu {{cssxref("width")}} s'estableix a <code>150px</code> perquè s'ajusti còmodament a través de la caixa d'informació (info-box). Els elements {{htmlelement("a")}} estan configurats en {{cssxref("display")}} inline-block, perquè s'asseguin en una línia però que encara siguin estilitzables, i estiguin dissenyats adequadament per als botons de pestanya, usant una varietat d'altres propietats.</p>
+
+<p>Afegiu el següent CSS:</p>
+
+<pre class="brush: css">.info-box li {
+  float: left;
+  list-style-type: none;
+  width: 150px;
+}
+
+.info-box li a {
+  display: inline-block;
+  text-decoration: none;
+  width: 100%;
+  line-height: 3;
+  background-color: red;
+  color: black;
+  text-align: center;
+}</pre>
+
+<p>Finalment, per a aquesta secció, establirem alguns estils als estats de l'enllaç. En primer lloc, configurarem els estats <code>:focus</code> i <code>:hover</code> de les pestanyes, perquè es vegin diferents quan estan enfocats/planejats, oferint als usuaris alguna infomació visual. En segon lloc, establirem una regla que posi el mateix estil en una de les pestanyes quan hi hagi una <code>class</code> <code>active</code> present en ella. Definirem això mitjançant JavaScript quan es faci clic a una pestanya. Col·loqueu els següents CSS per sota dels altres estils:</p>
+
+<pre class="brush: css">.info-box li a:focus, .info-box li a:hover {
+  background-color: #a60000;
+  color: white;
+}
+
+.info-box li a.active {
+  background-color: #a60000;
+  color: white;
+}</pre>
+
+<h3 id="Estilitzar_els_panells">Estilitzar els panells</h3>
+
+<p>El següent treball és dissenyar els nostres panells. Anem a engegar-ho!</p>
+
+<p>Primer de tot, afegiu la següent regla per dissenyar el contenidor <code>.panels</code> {{htmlelement("div")}}. Aquí, simplement, hem establert un {{cssxref("height")}} fix per assegurar-nos que els panells s'ajustin bé a l'interior de la caixa d'informació, {{cssxref("position")}} <code>relative</code> pel que fa a {{htmlelement("div" )}} com a context de posicionament, de manera que podeu col·locar elements fills posicionats relatius a ell i no a l'element {{htmlelement("html")}} i finalment el flotador {{cssxref("clear")}} establert en el CSS anterior perquè no interfereixi amb la resta del disseny.</p>
+
+<pre class="brush: css">.info-box .panels {
+  height: 352px;
+  position: relative;
+  clear: both;
+}</pre>
+
+<p>Finalment, per a aquesta secció, dissenyarem els elements individuals {{htmlelement("article")}} que componen els nostres panells. La primera regla que afegirem serà {{cssxref("position")}} <code>absolute</code> dels panells, i farà que tots quedin asseguts, alineats a {{cssxref("top")}} i {{cssxref("left")}} del seu contenidor {{htmlelement ("div")}} - aquesta part és absolutament clau per a tota aquesta característica de disseny, ja que fa que els panells s'asseguin uns sobre els altres. La regla també proporciona als panells la mateixa alçada de conjunt que el contenidor, i dóna al contingut un farciment, un text {{cssxref("color")}} i un {{cssxref("background-color")}}.</p>
+
+<p>La segona regla que afegirem aquí fa que un panell amb una <code>class</code> <code>active-panel</code>, establert en ell, tindrà un {{cssxref("z-index")}} d'1, que se li aplicarà, la qual cosa farà que s'asseguin per sobre dels altres panells (els elements posicionats tenen un <code>z-index</code> de 0 per defecte, la qual cosa els posaria a continuació). Una vegada més, afegirem aquesta classe utilitzant JavaScript en el moment adequat.</p>
+
+<pre class="brush: css">.info-box article {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 352px;
+  padding: 10px;
+  color: white;
+  background-color: #a60000;
+}
+
+.info-box .active-panel {
+  z-index: 1;
+}</pre>
+
+<h3 id="Afegir_el_nostre_JavaScript">Afegir el nostre JavaScript</h3>
+
+<p>L'últim pas per fer funcionar aquesta característica és afegir JavaScript. Col·loqueu el següent bloc de codi, exactament com s'escriu, entre les etiquetes d'obertura i tancament {{htmlelement("script")}} (trobareu aquestes a sota del contingut HTML):</p>
+
+<pre>var tabs = document.querySelectorAll('.info-box li a');
+var panels = document.querySelectorAll('.info-box article');
+
+for(i = 0; i &lt; tabs.length; i++) {
+  var tab = tabs[i];
+  setTabHandler(tab, i);
+}
+
+function setTabHandler(tab, tabPos) {
+  tab.onclick = function() {
+    for(i = 0; i &lt; tabs.length; i++) {
+      tabs[i].className = '';
+    }
+
+    tab.className = 'active';
+
+    for(i = 0; i &lt; panels.length; i++) {
+      panels[i].className = '';
+    }
+
+    panels[tabPos].className = 'active-panel';
+  }
+}</pre>
+
+<p><span class="short_text" id="result_box" lang="ca"><span>Aquest codi fa el següent:</span></span></p>
+
+<ul>
+ <li>Primer guardem una referència a totes les pestanyes i panells en dues variables anomenades <code>tabs</code> i <code>panels</code>, així, fàcilment, podem fer coses amb elles més endavant.</li>
+ <li>A continuació, utilitzem un bucle <code>for</code> per recórrer totes les pestanyes i executar una funció anomenada <code>setTabHandler()</code> en cadascuna, en el qual s'estableix la funcionalitat que ha de produir-se quan es fa clic en cadascuna d'elles. Quan s'executa, es passa a la funció una referència a la pestanya, en particular, per a la qual s'executa, <code>i</code> un nombre d'índex i que identifica la posició de la pestanya en la matriu <code>tabs</code>.</li>
+ <li>A la funció <code>setTabHandler()</code>, la pestanya té un controlador d'esdeveniments onclick establert en ell, de manera que quan es fa clic a la pestanya, es produeix el següent:
+  <ul>
+   <li>Un bucle <code>for</code> s'utilitza per recórrer totes les pestanyes i eliminar les classes que hi són presents.</li>
+   <li>Una <code>class</code> <code>active</code> s'estableix a la pestanya en la qual s'ha fet clic - recordeu que, anteriorment, aquesta classe té una regla associada al CSS que estableix el mateix estil {{cssxref("color")}} i {{cssxref("background-color")}} a la pestanya com els panells.</li>
+   <li>Un bucle <code>for</code> s'utilitza per recórrer tots els panells i eliminar les classes que hi són presents.</li>
+   <li>Una classe <code>active-panel</code> s'estableix al panell que correspon a la pestanya que es va fer clic - recordeu que anteriorment, aquesta classe té una regla associada al CSS que estableix el seu {{cssxref("z-index")}} a 1, fent que aparegui a la part superior dels altres panells.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Això és tot pel primer exemple. Manteniu obert el vostre codi, ja que l'afegirem a la segona.</p>
+
+<h2 id="Una_caixa_d'informació_amb_pestanyes_de_posició_fixa">Una caixa d'informació amb pestanyes de posició fixa</h2>
+
+<p>En el nostre segon exemple, farem el nostre primer exemple - la nostra caixa d'informació - i l'afegirem al context d'una pàgina web completa. Però no només això - li donarem una posició fixa perquè es mantingui en la mateixa posició en la finestra del navegador. Quan el contingut principal es desplaci, la caixa d'informació romandrà en la mateixa posició en la pantalla. El nostre exemple acabat tindrà aquest aspecte:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13364/fixed-info-box.png" style="border-style: solid; border-width: 1px; display: block; height: 585px; margin: 0px auto; width: 1118px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Podeu veure l'exemple acabat, executant-ho en directe a <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">fixed-info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html">codi font</a>). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.</p>
+</div>
+
+<p>Com a punt de partida, podeu fer servir l'exemple complet de la primera secció de l'article o fer una còpia local de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> des del nostre repositori de Github.</p>
+
+<h3 id="Addicions_HTML">Addicions HTML</h3>
+
+<p>En primer lloc, necessitem un codi HTML addicional per representar el contingut principal del lloc web. Afegiu el següent {{htmlelement("section")}} just a sota de l'etiqueta d'apertura {{htmlelement("body")}}, just abans de la secció existent:</p>
+
+<pre class="brush: html">&lt;section class="fake-content"&gt;
+  &lt;h1&gt;Fake content&lt;/h1&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+&lt;/section&gt;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Us podeu sentir lliures de canviar el contingut fals per a algun contingut real si ho desitjeu.</p>
+</div>
+
+<h3 id="Canvis_al_CSS_existent">Canvis al CSS existent</h3>
+
+<p>A continuació, hem de fer petits canvis al CSS existent, per tenir la caixa d'informació col·locada i posicionada Canvieu la regla <code>.info-box</code> per desfer-vos del <code>margin: 0 auto;</code>  (Ja no volem que la caixa d'informació estigui centrada), afegiu {{cssxref("position")}}: <code>fixed;</code>, i enganxeu-ho en el {{cssxref("top")}} de la finestra de visualització del navegador.</p>
+
+<p>Ara ha de ser així:</p>
+
+<pre class="brush: css">.info-box {
+  width: 450px;
+  height: 400px;
+  position: fixed;
+  top: 0;
+}</pre>
+
+<h3 id="Estilitzar_el_contingut_principal">Estilitzar el contingut principal</h3>
+
+<p>L'únic que queda per a aquest exemple és proporcionar al contingut principal amb un estil. Afegiu la següent regla sota la resta del vostre CSS:</p>
+
+<pre class="brush: css">.fake-content {
+  background-color: #a60000;
+  color: white;
+  padding: 10px;
+  height: 2000px;
+  margin-left: 470px;
+}</pre>
+
+<p>Per començar, donem al contingut el mateix {{cssxref("background-color")}}, {{cssxref("color")}}, i {{cssxref("padding")}} com els panells de caixa d'informació. A continuació, li donem un gran {{cssxref("margin-left")}} per moure-ho cap a la dreta, fent espai perquè la caixa d'informació s'assegui, de manera que no se superposi amb qualsevol altre cosa.</p>
+
+<p>Això marca el final del segon exemple; esperem que trobeu el tercer tan interessant.</p>
+
+<h2 id="Un_panell_amagat_lliscant"><span id="result_box" lang="ca"><span>Un panell amagat lliscant</span></span></h2>
+
+<p>L'exemple final que presentarem aquí és un panell que es llisca des de dins i fora de la pantalla en prémer una icona - com s'ha esmentat anteriorment, això és popular per a situacions com ara dissenys de mòbils, on els espais de pantalla disponibles són petits, per la qual cosa no es desitja usar la major part d'ella, mostrant un menú o panell d'informació en lloc de contingut útil.</p>
+
+<p>El nostre exemple acabat tindrà aquest aspecte:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13366/hidden-sliding-panel.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 950px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Podeu veure l'exemple acabat, executant-ho en directe a <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hidden-info-panel.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">codi font</a>). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.</p>
+</div>
+
+<p>Com a punt de partida, feu una còpia local de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html">hidden-info-panel-start.html</a> des del nostre repositori de Github. Això no segueix l'exemple anterior, de manera que cal un nou fitxer d'inici. Fem un cop d'ull al codi HTML del fitxer:</p>
+
+<pre class="brush: css">&lt;label for="toggle"&gt;❔&lt;/label&gt;
+&lt;input type="checkbox" id="toggle"&gt;
+&lt;aside&gt;
+
+  ...
+
+&lt;/aside&gt;</pre>
+
+<p>Per començar, tenim un element {{htmlelement("label")}} i un element {{htmlelement("input")}} - els elements <code>&lt;label&gt;</code> normalment s'utilitzen per associar una etiqueta de text amb un element de formulari amb finalitats d'accessibilitat (permetent que un usuari de pantalla vegi quina descripció fa amb quin element del formulari). Aquí s'associa amb la casella de verificació <code>&lt;input&gt;</code> amb els atributs <code>for</code> i <code>id</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Hem posat un gran signe d'interrogació en el nostre HTML perquè actuï com la nostra icona d'informació - aquest representa el botó que es premut per mostrar/amagar el panell.</p>
+</div>
+
+<p>Aquí utilitzarem aquests elements per un propòsit lleugerament diferent - un altre efecte secundari útil dels elements <code>&lt;label&gt;</code> és que podeu fer clic a l'etiqueta de la casella de verificació per a marcar la casella de verificació, així com només la casella de verificació. Això ha portat a la coneguda <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, que proporciona una forma lliure de JavaScript per controlar un  element mitjançant la commutació d'un botó. L'element que anem a controlar és l'element {{htmlelement("aside")}} que segueix els altres dos (hem deixat el seu contingut fora del llistat del codi anterior per brevetat).</p>
+
+<p>A les seccions següents explicarem com funciona tot això.</p>
+
+<h3 id="Estilitzar_els_elements_de_formulari">Estilitzar els elements de formulari</h3>
+
+<p>Primer tractarem els elements de formulari - afegiu el següent CSS entre les etiquetes {{htmlelement("style")}}:</p>
+
+<pre class="brush: css">label[for="toggle"] {
+  font-size: 3rem;
+  position: absolute;
+  top: 4px;
+  right: 5px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  position: absolute;
+  top: -100px;
+}</pre>
+
+<p>La primera regla donar estil el <code>&lt;label&gt;</code>; aquí tenim:</p>
+
+<ul>
+ <li>Establiu una gran {{cssxref("font-size")}} per fer que la icona sigui agradable i gran.</li>
+ <li>Establiu {{cssxref("position")}} <code>absolute</code>, i utilitzeu {{cssxref("top")}} i {{cssxref("right")}} per col·locar-ho bé a la cantonada superior dreta.</li>
+ <li>Establiu un {{cssxref("z-index")}} d'1 - això és perquè quan el panell d'informació estigui dissenyat i es mostri, no cobreixi la icona; En lloc d'això, la icona s'asseura sobre d'ell, de manera que es pogui tornar a prémer per ocultar el panell d'informació.</li>
+ <li>S'ha utilitzat la propietat {{cssxref("cursor")}} per canviar el cursor del ratolí quan es mou sobre la icona, amb un punter de mà (com el que es veu quan es planeja sobre els enllaços), com una pista visual addicional per als usuaris com que la icona fa alguna cosa interessant.</li>
+</ul>
+
+<p>La segona regla estableix {{cssxref("position")}} <code>absolute</code> en l'element <code>&lt;input&gt;</code> de casella de verificació real i l'oculta a la part superior de la pantalla. De fet, no volem veure això a la nostra interfície d'usuari.</p>
+
+<h3 id="Estilitzar_el_panell">Estilitzar el panell</h3>
+
+<p>Ara és hora de donar-li estil el propi panell lliscant. Afegiu la següent regla al final del vostre CSS:</p>
+
+<pre class="brush: css">aside {
+  background-color: #a60000;
+  color: white;
+
+  width: 340px;
+  height: 98%;
+  padding: 10px 1%;
+
+  position: fixed;
+  top: 0;
+  right: -370px;
+
+  transition: 0.6s all;
+}</pre>
+
+<p>Hi ha molt a fer aquí, analitzem-ho a poc a poc:</p>
+
+<ul>
+ <li>En primer lloc, establim {{cssxref("background-color")}} i {{cssxref("color")}} en la caixa d'informació.</li>
+ <li>A continuació, establim un {{cssxref("width")}} fix al panell i feu que {{cssxref("height")}} sigui tota l'alçada de la finestra de visualització del navegador.</li>
+ <li>També inclourem un {{cssxref("padding")}} per compensar l'amplada/alçada al valor total que volem (això és necessari ja que no hem establert <code>box-sizing: border-box;</code> en aquest exemple).</li>
+ <li>A continuació, establim una {{cssxref("position")}}: <code>fixed;</code> en el panell perquè sempre aparegui al mateix lloc, fins i tot si la pàgina té contingut per desplaçar-se. Ho peguem a la {{cssxref("top")}} de la finestra de visualització, i ho configurem perquè de manera predeterminada estigui fora de pantalla a la {{cssxref("right")}}.</li>
+ <li>Finalment, establim una {{cssxref("transition")}} a l'element. Les transicions són una característica interessant que permet fer canvis entre estats que succeeixen suaument, en lloc de simplement fer "on", "off" abruptament. En aquest cas, intentem que el panell llisqui suaument a la pantalla quan es marca la casella de verificació. (O dit d'una altra manera, quan es fa clic a la icona del signe d'interrogació - recordeu, fent clic en el &lt;label&gt;, marcarà la casella de verificació associada! Us explicàvem que era un hack). Aprendreu molt més sobre...</li>
+</ul>
+
+<h3 id="Seleccionar_el_estat_marcat">Seleccionar el estat marcat</h3>
+
+<p>Hi ha una mica de CSS per afegir - poseu el següent al final del vostre CSS:</p>
+
+<pre class="brush: css">input[type=checkbox]:checked + aside {
+  right: 0px;
+}</pre>
+
+<p>El selector és bastant complex aquí - estem seleccionant l'element <code>&lt;aside&gt;</code> adjacent a l'element <code>&lt;input&gt;</code>, però només quan està marcat (tingueu en compte l'ús de la pseudo-classe {{cssxref (": checked")}} per aconseguir això). Quan aquest és el cas, estem establint la propietat {{cssxref("right")}} de <code>&lt;aside&gt;</code> a 0px, el que fa que el panell aparegui novament en la pantalla (suaument a causa de la transició). En fer clic en l'etiqueta, torna a desmarcar la casella de verificació, que torna a ocultar el panell.</p>
+
+<p>Així que aquí ho teniu - una manera bastant intel·ligent, lliure de Javascript, per crear un efecte de botó alternatiu. Això funcionarà en IE9 i superiors (la transició suau funcionarà en IE10 i superiors). Aquest efecte té algunes preocupacions - això és abusar una mica d'elements de forma (no estan destinats per a aquest propòsit), i l'efecte no és el millor en termes d'accessibilitat - l'etiqueta no es pot enfocar de manera predeterminada, i l'ús no semàntic dels elements de formulari pot causar problemes amb els lectors de pantalla. JavaScript i un enllaç o un botó poden ser més apropiat, però encara és divertit experimentar.</p>
+
+<h2 id="Resum">Resum</h2>
+
+<p>Així que arrodonim el nostre cop d'ull en el posicionament - ara com ara, heu de tenir una idea de com funciona la mecànica bàsica, així com la comprensió de com començar a aplicar-los en la construcció d'algunes característiques interessants de la interfície d'usuari. No us preocupeu sinó vau rebre tot això immediatament - el posicionament és un tema bastant avançat, i sempre podeu treballar a través dels articles de nou, per ajudar-vos en la vostra comprensió. El següent tema al que ens referirem és a Flexbox.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
diff --git a/files/ca/learn/css/css_layout/responsive_design/index.html b/files/ca/learn/css/css_layout/responsive_design/index.html
new file mode 100644
index 0000000000..5bf909e6e7
--- /dev/null
+++ b/files/ca/learn/css/css_layout/responsive_design/index.html
@@ -0,0 +1,324 @@
+---
+title: Disseny responsiu
+slug: Learn/CSS/Disseny_CSS/Disseny_responsiu
+translation_of: Learn/CSS/CSS_layout/Responsive_Design
+---
+<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div>
+
+<p>En els primers dies del disseny de pàgines web es creaven pàgines per a una mida de pantalla determinada. Si l’usuari tenia una pantalla més gran o més petita que la que el dissenyador s’esperava, els resultats anaven des de barres de desplaçament no desitjades fins a línies excessivament llargues i un mal ús de l’espai. A mesura que apareixien mides de pantalla més diverses, va aparéixer el concepte de <em>disseny web responsiu</em> (RWD o <em>responsive web design</em>), un conjunt de pràctiques que permeten a les pàgines web alterar el disseny i l’aparença per a adaptar-se a diferents amplades, resolucions, etc. És una idea que ha canviat la manera de dissenyar una pàgina web per a diversos dispositius, i en aquest article t’ajudarem a entendre les principals tècniques que has de conèixer per a dominar-la.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisits:</th>
+   <td>Conceptes bàsics d’HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>), i nocions de com funciona el CSS (consulta els <a href="/ca/docs/Learn/CSS/First_steps">Primers passos amb el CSS</a> i els <a href="/ca/docs/Learn/CSS/Building_blocks">elements bàsics del CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectiu:</th>
+   <td>Entendre els conceptes fonamentals i la història del disseny responsiu.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Història_dels_dissenys_de_pàgina_web">Història dels dissenys de pàgina web</h2>
+
+<p>En un moment de la història, només tenies dues opcions a l’hora de dissenyar un lloc web:</p>
+
+<ul>
+ <li>Podies crear un lloc web <em>líquid</em>, que s’estendria fins a omplir la finestra del navegador</li>
+ <li>o un lloc amb una <em>amplada fixa</em>, que tindria una mida fixa en píxels.</li>
+</ul>
+
+<p>Aquests dos enfocaments tenien com a resultat un lloc web que s’adequava essencialment a la pantalla de la persona que havia dissenyat el lloc web. El lloc web líquid donava un disseny aixafat en pantalles més petites (com es pot veure a continuació), i línies molt llargues que costaven molt de llegir en les pantalles grans.</p>
+
+<figure><img alt="Una disposició amb dues columnes aixafades en una finestra de visualització de la mida d’un dispositiu mòbil." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Observa aquest disseny de pàgina web líquid senzill: <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">codi d’origen</a>. Amplia o redueix la finestra del navegador i observa com en canvia l’aspecte segons les diferents mides.</p>
+</div>
+
+<p>Amb llocs web amb amplada fixa es corria el risc d’aparició d’una barra de desplaçament horitzontal en les pantalles que eren més petites que l’amplada del lloc web (com es pot veure a continuació) i de molta superfície blanca a les vores del disseny en les pantalles que eren més grans.</p>
+
+<figure><img alt="Disseny amb barra de desplaçament horitzontal en una finestra de visualització de la mida d’un dispositiu mòbil." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Observa aquest disseny de pàgina web senzill d’amplada fixa: <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">codi d’origen</a>. Un cop més, canvia la mida de la finestra del navegador i observa’n el resultat.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Les captures de pantalla de dalt es fan amb el <a href="/en-US/docs/Tools/Responsive_Design_Mode">mode de disseny responsiu</a> de les DevTools de Firefox.</p>
+</div>
+
+<p>A mesura que la web per a dispositius mòbils va començar a esdevenir una realitat amb els primers telèfons mòbils, les companyies que volien adherir-se en general a la tecnologia mòbil creaven una versió del lloc web especial per a dispositius mòbils amb una URL diferent (sovint alguna cosa com ara <em>m.example.com</em> o <em>example.mobi</em>). Això volia dir que calia desenvolupar i mantenir actualitzades dues versions independents de la mateixa pàgina web.</p>
+
+<p>A més, aquests llocs web per a dispositius mòbils solien oferir una experiència d’usuari molt reduïda. Com que els dispositius mòbils es van tornar més potents i van poder mostrar llocs web complets, això frustrava els usuaris de dispositius mòbils, que es trobaven atrapats en la versió mòbil del lloc web i no podien accedir a informació que sabien que hi havia en la versió d’escriptori, que incloïa totes les funcions de la pàgina web.</p>
+
+<h2 id="Disseny_flexible_abans_del_disseny_responsiu">Disseny flexible abans del disseny responsiu</h2>
+
+<p>Es van desenvolupar diversos enfocaments per a intentar resoldre els inconvenients dels mètodes líquids o d’amplada fixa per a crear llocs web. El 2004, Cameron Adams va escriure una publicació titulada <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Resolution dependent layout</a>, on descriu un mètode per a crear un disseny de pàgina web que s’adapta a diferents resolucions de pantalla. Aquest enfocament requeria JavaScript per a detectar la resolució de la pantalla i carregar el CSS correcte.</p>
+
+<p>Zoe Mickley Gillenwater va ser fonamental en <a href="http://zomigi.com/blog/voices-that-matter-slides-available/">la seva tasca</a> de descriure i formalitzar les diferents maneres de crear llocs web flexibles, per a intentar trobar una situació intermèdia entre omplir tota la pantalla o tenir una mida completament fixa.</p>
+
+<h2 id="El_disseny_responsiu">El disseny responsiu</h2>
+
+<p>El terme disseny responsiu va ser <a href="https://alistapart.com/article/responsive-web-design/">creat per Ethan Marcotte el 2010</a>, que va descriure l’ús de tres tècniques combinades.</p>
+
+<ol>
+ <li>La primera va ser la idea de les graelles fluides, cosa que ja explorava Gillenwater, i que es pot llegir en l’article de Marcotte, <a href="https://alistapart.com/article/fluidgrids/">Fluid grids</a> (publicat el 2009 en <em>A list apart</em>).</li>
+ <li>La segona tècnica va ser la idea d’<a href="http://unstoppablerobotninja.com/entry/fluid-images">imatges fluides</a>. Utilitzant una tècnica molt senzilla d’establir la propietat <code>max-width</code> al <code>100%</code>, les imatges es farien més petites si la columna que les contenia es feia més estreta que la mida intrínseca de la imatge, però mai no augmentaria. D’aquesta manera, una imatge s’escala per a poder-se incloure en una columna de mida flexible sense que desbordi, però no es fa més gran i es pixela si la columna s’amplia més que la imatge.</li>
+ <li>El tercer component clau va ser la <a href="/en-US/docs/Web/CSS/Media_Queries">consulta de mèdia</a> (o <em>media query</em>). Les consultes de mèdia habiliten el tipus de canvi de disseny de pàgina web que Cameron Adams havia explorat abans amb JavaScript, però utilitzant només CSS. En lloc de tenir un disseny de pàgina web per a cada mida de pantalla, se’n podria tenir un i canviar-ne la disposició dels elements. Es podrien fer aparèixer barres laterals per a les pantalles més petites, o es podia mostrar una navegació alternativa.</li>
+</ol>
+
+<p>És important entendre que <strong>el disseny web responsiu no és una tecnologia independent</strong>: és un terme que s’utilitza per a descriure un enfocament del disseny de pàgines web o un conjunt de bones pràctiques que s’utilitzen per a crear un disseny de pàgines web que pugui <em>respondre</em> segons el dispositiu que s’utilitza per a visualitzar el contingut. En l’exploració original de Marcotte, això va donar lloc a les graelles flexibles (amb elements flotants) i les consultes de mèdia; però en els gairebé deu anys des que es va escriure aquest article, treballar de manera responsiva s’ha convertit en la norma. Els mètodes de disseny amb CSS moderns són intrínsecament responsius, i hi ha novetats integrades a la plataforma web que faciliten el disseny de llocs web responsius.</p>
+
+<p>La resta d’aquest article t’indica les diverses funcions de la plataforma web que pots utilitzar per a crear un lloc web responsiu.</p>
+
+<h2 id="Les_consultes_a_mèdia_media_queries">Les consultes a mèdia (<em>media queries</em>)</h2>
+
+<p>El disseny responsiu només va poder sorgir a causa de les consultes a mèdia. L’especificació del nivell 3 de les consultes a mèdia es va convertir en una Candidate Recommendation el 2009, cosa que significa que es considerava llesta per a implementar-la en els navegadors. Les consultes a mèdia ens permeten fer un seguit de proves (per exemple, si la pantalla de l’usuari és més gran que una certa amplada o una determinada resolució) i aplicar CSS de manera selectiva per a dissenyar la pàgina web més adequada segons les necessitats de l’usuari.</p>
+
+<p>Per exemple, la consulta als mèdia següent esbrina si la pàgina web que es mostra ho fa com una pantalla (per tant, no és un document imprès), i si la finestra té almenys 800 píxels d’ample. El CSS per al selector <code>.container</code> només s’aplica si aquestes dues coses són certes.</p>
+
+<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} </code>
+</pre>
+
+<p>Pots afegir diverses consultes a mèdia dins d’un full d’estil, i ajustar el disseny sencer o només unes parts perquè s’adapti més bé a les diverses mides de pantalla. Els punts en què s’introdueix una consulta de mèdia i es canvia la disposició dels elements de la pàgina web es coneixen com <em>punts de ruptura</em>.</p>
+
+<p>Un enfocament habitual quan s’utilitzen les consultes als mèdia és crear un disseny senzill d’una sola columna per a dispositius de pantalla estreta (per exemple, telèfons mòbils), després comprovar si hi ha pantalles més grans i implementar una disposició en múltiples columnes quan saps que tens prou amplada de pantalla per a fer-ho. Sovint es descriu com disseny <strong>mobile first</strong>.</p>
+
+<p>Trobaràs més informació en la documentació de MDN per a les <a href="/en-US/docs/Web/CSS/Media_Queries">consultes als mèdia</a>.</p>
+
+<h2 id="Graelles_flexibles">Graelles flexibles</h2>
+
+<p>Els llocs responsius no només canvien la distribució entre punts de ruptura, sinó que es basen en graelles flexibles. Una graella flexible significa que no cal delimitar el lloc web a totes les mides possibles de dispositius que hi ha i crear un disseny en píxels perfecte. Aquest plantejament seria impossible, atès el gran nombre de dispositius de mida diferent que hi ha, i del fet que, com a mínim en la versió d’escriptori, la finestra del navegador no sempre es maximitza.</p>
+
+<p>Si fas servir una graella flexible, només has d’afegir un punt de ruptura i canviar el disseny en el punt en què el contingut es comença a veure malament. Per exemple, si les longituds de les línies es fan il·legibles a mesura que augmenta la mida de la pantalla, o si una caixa s’encongeix fins a una amplada de dues paraules en cada línia a mesura que la mida de la pantalla es redueix.</p>
+
+<p>En els primers dies del disseny responsiu, l’única opció per a dissenyar pàgines web era utilitzar <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flotadors">elements flotants</a>. Els dissenys de pantalla amb elements flotants flexibles s’aconseguien donant a cada element una amplada en percentatge i assegurar-se que no s’atenyia més del 100% per a tota la pàgina. En la seva obra original sobre graelles flexibles, Marcotte va detallar una fórmula per a convertir en percentatges un disseny de pàgina dissenyat en píxels.</p>
+
+<pre class="notranslate"><code>target / context = result </code>
+</pre>
+
+<p>Per exemple, si la mida de la nostra columna de destinació és de 60 píxels i el context (o contenidor) en què es troba és de 960 píxels, dividim 60 per 960 i obtenim un valor que podem utilitzar en el nostre CSS, després de traslladar el punt decimal dos llocs a la dreta.</p>
+
+<pre class="brush: css notranslate"><code>.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} </code>
+</pre>
+
+<p>Avui dia trobaràs aquest enfocament en molts llocs web, i també el trobaràs documentat aquí, en la secció dedicada al disseny de l’article de <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">mètodes heretats de disseny de pàgines web</a>. És probable que en el transcurs del teu treball et trobis amb llocs web que usen aquest enfocament, de manera que val la pena entendre’l, tot i que no construiràs un lloc modern amb una graella flexible basada en elements flotants.</p>
+
+<p>L’exemple següent mostra un disseny senzill i sensible amb consultes a mèdia i una graella flexible. En pantalles estretes, el disseny mostra les caixes apilades les unes sobre les altres:</p>
+
+<figure><img alt="Una vista d’un dispositiu mòbil amb una disposició de caixes apilades verticalment l’una sobre l’altra." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<p>En pantalles més amples es passa a dues columnes:</p>
+
+<figure><img alt="Una vista d’un dispositiu d’escriptori d’un disseny amb dues columnes." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Pots trobar l’<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">exemple en viu</a> i el <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">codi d’origen</a> d’aquest exemple a GitHub.</p>
+</div>
+
+<h2 id="Tecnologies_modernes_de_disseny_de_pàgines_web">Tecnologies modernes de disseny de pàgines web</h2>
+
+<p>De manera predeterminada, els mètodes moderns de disseny de pàgines web com ara el <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">disseny en múltiples columnes</a>, el <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flexbox">Flexbox</a> i el <a href="/ca/docs/Learn/CSS/Disseny_CSS/Graelles">Grid</a> són responsius per defecte. Tots aquests mètodes parteixen de la base que vols crear una graella flexible i et proporcionen les maneres de fer-ho més fàcils.</p>
+
+<h3 id="Multicol">Multicol</h3>
+
+<p>El més antic d’aquests mètodes de disseny de pàgines web és <code>multicol</code>: quan especifiques un nombre de columnes (<code>column-count</code>), indiques en quantes columnes vols dividir el contingut. El navegador llavors calcula la mida d’aquestes columnes, que canvia d’acord amb la mida de la pantalla.</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  column-count: 3;
+} </code>
+</pre>
+
+<p>Si en lloc d’això estableixes l’atribut <code>column-width</code>, especifiques una amplada <em>mínima</em>. El navegador crea tantes columnes d’aquesta amplada com càpiguen còmodament en el contenidor, i reparteix l’espai entre totes les columnes. Per tant, el nombre de columnes canvia segons la quantitat d’espai que hi ha.</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  column-width: 10em;
+} </code>
+</pre>
+
+<h3 id="Flexbox">Flexbox</h3>
+
+<p>Amb la tecnologia Flexbox, els elements flexibles es redueixen i distribueixen l’espai entre els elements d’acord amb l’espai que hi ha en el contenidor segons el comportament inicial que tenen predeterminat. Si canvies els valors de <code>flex-grow</code> i <code>flex-shrink</code>, pots indicar com vols que es comportin els elements quan hi ha més o menys espai al voltant.</p>
+
+<p>En l’exemple següent, els elements flexibles ocupen cada un la mateixa quantitat d’espai en el contenidor flexible, mitjançant la propietat abreviada <code>flex: 1</code>, com es descriu en l’article <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Disseny_CSS/Flexbox#Dimensi%C3%B3_flexible_dels_elements_flexibles">Flexbox: Dimensions flexibles d’elements flex</a>.</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Com a exemple hem reconstruït el disseny responsiu senzill anterior, aquest cop amb Flexbox. Pots veure que ja no cal fer servir valors percentuals estranys per a calcular la mida de les columnes: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">codi d’origen</a>.</p>
+</div>
+
+<h3 id="Graella_CSS">Graella CSS</h3>
+
+<p>En el disseny de pàgines web amb graella CSS, la unitat <code>fr</code> permet distribuir l’espai disponible en les traces d’una graella. L’exemple següent crea un contenidor de graella amb tres traces de mida <code>1fr</code>. Es creen tres traces de columna, i cadascuna ocupa una part de l’espai disponible en el contenidor. Pots obtenir més informació sobre aquest enfocament per a crear una graella en la secció Aprendre a dissenyar graelles, de l’article <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Graelles flexibles amb la unitat fr</a>.</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: La versió del disseny de pàgines web amb graella és encara més senzilla, perquè permet definir les columnes amb .wrapper: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">codi d’origen</a>.</p>
+</div>
+
+<h2 id="Imatges_responsives">Imatges responsives</h2>
+
+<p>L’enfocament més senzill de les imatges responsives es va descriure en els primers articles de Marcotte sobre el disseny de pàgines web responsiu. Bàsicament, agafes una imatge de la mida més gran que puguis necessitar, i la redueixes. Aquest és encara un enfocament emprat avui, i en la majoria de fulls d’estil trobaràs en algun lloc el CSS següent:</p>
+
+<pre class="brush: css notranslate"><code>img {
+  max-width: 100%:
+} </code>
+</pre>
+
+<p>Hi ha inconvenients evidents en aquest enfocament. És possible que la imatge es mostri molt més petita que la seva mida intrínseca, i això representa una pèrdua d’amplada de banda: un usuari de dispositiu mòbil pot acabar descarregant una imatge que és diverses vegades de la mida del que realment veu a la finestra del navegador. A més, pot ser que no vulguis la mateixa relació d’aspecte de la imatge al mòbil i a l’escriptori. Per exemple, pot ser bo tenir una imatge quadrada per a mòbils, i mostrar la mateixa imatge en format apaïsat a l’escriptori. O bé, tenint en compte la mida més petita del dispositiu mòbil, pot ser que hi vulguis mostrar una imatge diferent, que s’entengui més fàcilment en una pantalla petita. Aquestes coses no es poden aconseguir simplement reduint una imatge.</p>
+
+<p>Les imatges responsives, amb l’element {{htmlelement("picture")}} i els atributs <code>srcset</code> i <code>sizes</code> de {{htmlelement("img")}} resolen tots dos problemes. Pots proporcionar diverses mides, juntament amb «suggeriments» (metadades que descriuen la mida de la pantalla i la resolució a la qual s’adapta la imatge), i el navegador tria la imatge més adequada per a cada dispositiu i procura que l’usuari descarregui la mida adequada de la imatge en el dispositiu que utilitza.</p>
+
+<p>També pots usar imatges de <em>director artístic</em>, que proporcionen un retall o una imatge completament diferent per a diferents mides de pantalla.</p>
+
+<p>Pots trobar una guia detallada sobre <a href="/ca/docs/Learn/HTML/Multimèdia_i_incrustar/Imatges_sensibles">Imatges responsives</a> en el mòdul Aprendre HTML de MDN.</p>
+
+<h2 id="Tipografia_responsiva">Tipografia responsiva</h2>
+
+<p>Un element de disseny responsiu que encara no hem tractat en articles anteriors és la idea de la tipografia responsiva. Aquest concepte descriu essencialment el fet de canviar la mida de lletra segons l’espai de pantalla que reflecteixen les consultes a mèdia.</p>
+
+<p>En aquest exemple, volem establir el nostre títol d’encapçalament de nivell 1 en <code>4rem</code>, és a dir, que serà quatre vegades la mida de la nostra lletra base. És un títol molt gran! Només volem aquest títol d’encapçalament tan gran en mides de pantalla grans, per tant, primer creem un títol d’encapçalament més petit i després utilitzem les consultes a mèdia per a sobreescriure’l amb la mida més gran si sabem que l’usuari té una mida de pantalla d’almenys <code>1200px</code>.</p>
+
+<pre class="brush: css notranslate"><code>html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} </code>
+</pre>
+
+<p>Hem editat el nostre exemple de graella responsiva per a incloure el tipus responsiu amb el mètode descrit. Pots veure com el títol d’encapçalament canvia de mida a mesura que el disseny canvia a la versió de dues columnes.</p>
+
+<p>En el dispositiu mòbil, el títol d’encapçalament és més petit:</p>
+
+<figure><img alt="Un esquema apilat amb una mida de títol d’encapçalament petita." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<p>Tanmateix, en el dispositiu d’escriptori veiem la mida del títol d’encapçalament més gran:</p>
+
+<figure><img alt="Un disseny de dues columnes amb un títol d’encapçalament gran." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Observa aquest exemple en acció: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">codi d’origen</a>.</p>
+</div>
+
+<p>Tal com mostra aquest enfocament de la tipografia, no cal restringir les consultes a mèdia a canviar només el disseny de pàgina web. Es poden utilitzar per a ajustar qualsevol element i fer-lo més útil o atractiu a les diverses mides de pantalla.</p>
+
+<h3 id="L’ús_d’unitats_de_finestra_de_visualització_per_a_tipografies_responsives">L’ús d’unitats de finestra de visualització per a tipografies responsives</h3>
+
+<p>Un enfocament interessant és utilitzar la unitat <code>vw</code> de finestra de visualització per a habilitar la tipografia responsiva. <code>1vw</code> és igual a un 1 per cent de l’amplada de la visualització, cosa que significa que si defineixes la mida de la lletra amb <code>vw</code>, sempre es relacionarà amb la mida de la finestra de visualització.</p>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: 6vw;
+}</pre>
+
+<p>El problema de fer servir la unitat <code>vw</code> és que l’usuari perd la capacitat d’ampliar un bloc de text, perquè aquest text sempre està relacionat amb la mida de la finestra de visualització. <strong>Per tant, mai no hauries de definir text fent servir només les unitats de finestra de visualització</strong>.</p>
+
+<p>Hi ha una solució, que implica l’ús de <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>. Si afegeixes la unitat <code>vw</code> a un conjunt de valors amb una mida fixa com <code>em</code> o <code>rem</code>, encara es pot fer zoom del text. Essencialment, la unitat <code>vw</code> s’afegeix a sobre d’aquest valor ampliat:</p>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: calc(1.5rem + 3vw);
+}</pre>
+
+<p>Això vol dir que només hem d’especificar la mida de la lletra per al títol d’encapçalament, en lloc de configurar-la per a dispositius mòbils i redefinir-la segons les consultes a mèdia. A continuació, la lletra augmenta gradualment a mesura que augmenta la mida de la finestra de visualització.</p>
+
+<div class="blockIndicator note">
+<p>Observa aquest exemple en acció: <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">codi d’origen</a>.</p>
+</div>
+
+<h2 id="L’etiqueta_meta_de_la_finestra_de_visualització">L’etiqueta <code>meta</code> de la finestra de visualització</h2>
+
+<p>Si observes el tipus de lletra d’una pàgina HTML responsiva, normalment trobaràs l’etiqueta {{htmlelement("meta")}} a la capçalera (<code>&lt;head&gt;</code>) del document.</p>
+
+<pre class="brush: html notranslate"><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;</code>
+</pre>
+
+<p>Aquesta etiqueta <code>meta</code> indica als navegadors dels dispositius mòbils que han d’establir l’amplada de la finestra de visualització a l’amplada del dispositiu i escalar el document al 100% de la mida prevista, cosa que mostra el document a la mida optimitzada per a dispositius mòbils.</p>
+
+<p>Per què cal, això? Perquè els navegadors dels dispositius mòbils tendeixen a mentir sobre l’amplada de la finestra de visualització.</p>
+
+<p>Aquesta etiqueta <code>meta</code> existeix perquè quan es va llançar l’iPhone original i la gent va començar a veure llocs web en una petita pantalla de telèfon, la majoria dels llocs web no estaven optimitzats per a dispositius mòbils. Per tant, el navegador del dispositiu mòbil establia l’amplada de la visualització a 960 píxels, la representava a aquella amplada i mostrava el resultat com la versió ampliada del disseny per al dispositiu d’escriptori. Altres navegadors de dispositius mòbils (per exemple, el de Google Android) van fer el mateix. Els usuaris podien fer zoom i desplaçar-se per la web per a veure els fragments que els interessaven, però allò no era còmode. Encara ho podràs veure si tens la mala sort d’anar a parar a un lloc web que no té un disseny responsiu.</p>
+
+<p>El problema és que el teu disseny responsiu amb punts de ruptura i consultes a mèdia no funciona tal com es preveu per als navegadors mòbils. Si tens un disseny de pantalla estret que s’inicia amb una amplada de visualització de 480px o menys i la ruptura s’estableix a 960px, mai no veuràs la disposició de pantalla estreta al dispositiu mòbil. En canvi, si defineixes <code>width=device-width</code>, sobreescrius l’amplada predeterminada d’Apple <code>width=960px</code> amb l’amplada real del dispositiu, de manera que les consultes a mèdia permetran que funcioni com es preveu.</p>
+
+<p><strong>Per tant, <em>sempre</em> has d’incloure la línia HTML anterior a la capçalera dels teus documents.</strong></p>
+
+<p>Hi ha altres opcions de configuració que pots utilitzar amb l’etiqueta <code>meta</code> de la finestra de visualització, però, en general, t’anirà bé utilitzar la línia anterior.</p>
+
+<ul>
+ <li><code>initial-scale</code>: Configura el zoom inicial de la pàgina, que establim a 1.</li>
+ <li><code>height</code>: Estableix una alçada específica per a la finestra de visualització.</li>
+ <li><code>minimum-scale</code>: Estableix el nivell mínim de zoom.</li>
+ <li><code>maximum-scale</code>: Estableix el nivell màxim de zoom.</li>
+ <li><code>user-scalable</code>: Impedeix fer zoom si es defineix <code>no</code>.</li>
+</ul>
+
+<p>Has d’evitar l’ús de <code>minimum-scale</code>, <code>maximum-scale</code>, i en particular la configuració de <code>user-scalable</code> en <code>no</code>. Els usuaris haurien de poder fer zoom en la mesura que necessitin; impedir això genera problemes d’accessibilitat.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Hi ha una @rule CSS dissenyada per a substituir l’etiqueta <code>meta</code> de la finestra de visualització (<a href="/en-US/docs/Web/CSS/@viewport">@viewport</a>), però té una compatibilitat de navegadors deficient. Es va implementar a Internet Explorer i Edge, però un cop entri en funcionament Edge basat en Chromium, deixarà de formar part del navegador Edge.</p>
+</div>
+
+<h2 id="Resum">Resum</h2>
+
+<p>El disseny responsiu es refereix a un disseny de lloc o d’aplicació que respon a l’entorn en què es visualitza. Comprèn diverses funcions i tècniques CSS i HTML, i ara és essencialment l’única manera com construïm els llocs web per defecte. Tingues en compte els llocs web que visites amb el dispositiu mòbil: probablement és poc habitual trobar-te amb un lloc que és la versió reduïda de la d’escriptori, o en què cal desplaçar-se de costat per a trobar-hi coses. Això és perquè la xarxa web s’ha orientat cap a aquest enfocament de disseny responsiu.</p>
+
+<p>També ha estat molt més fàcil aconseguir dissenys responsius amb l’ajuda dels mètodes de disseny que has après en aquests articles. Si ets nou en el desenvolupament web, avui tens moltes més eines a la teva disposició que en els primers dies del disseny responsiu. Per tant, val la pena comprovar la data dels materials de referència que consultes. Tot i que els articles històrics continuen sent útils, l’ús modern de CSS i HTML facilita molt la creació de dissenys elegants i útils, i independents del dispositiu del visitant.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="En_aquest_mòdul">En aquest mòdul</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducció al disseny CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flux normal</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Elements flotants</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionament</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disseny en diverses columnes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">El disseny responsiu</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guia d’iniciació a les consultes de mèdia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Mètodes heretats de disseny de pàgines web </a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilitat dels navegadors antics</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Avaluació del conjunt d’elements bàsics del disseny</a></li>
+</ul>
diff --git a/files/ca/learn/css/css_layout/supporting_older_browsers/index.html b/files/ca/learn/css/css_layout/supporting_older_browsers/index.html
new file mode 100644
index 0000000000..5a689b6437
--- /dev/null
+++ b/files/ca/learn/css/css_layout/supporting_older_browsers/index.html
@@ -0,0 +1,237 @@
+---
+title: Suport en navegadors antics
+slug: Learn/CSS/Disseny_CSS/Suport_en_navegadors_antics
+translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary">En aquest mòdul et recomanem que utilitzis els mètodes Flexbox i Grid com a eines principals per als teus dissenys. Tot i això, hi haurà visitants del teu lloc web que utilitzin navegadors més antics o navegadors que no admetin els mètodes que has utilitzat. Això sempre serà així a la xarxa: a mesura que es desenvolupen funcions noves, els diferents navegadors prioritzen coses diferents. Aquest article explica com utilitzar tècniques web modernes sense perjudicar els usuaris que empren una tecnologia més antiga.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisits:</th>
+   <td>Els conceptes bàsics d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>), i nocions de com funciona el CSS (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 com proporcionar assistència per als dissenys en navegadors antics que potser no són compatibles amb les funcions que vols utilitzar.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="El_panorama_de_compatibilitat_dels_navegadors_per_al_teu_lloc_web">El panorama de compatibilitat dels navegadors per al teu lloc web?</h2>
+
+<p>Cada lloc web és diferent en termes de públic objectiu. Abans de decidir l’enfocament que cal adoptar, esbrina el nombre de visitants que accedeixen al teu lloc web amb navegadors més antics. Això és senzill si ja tens un lloc web que simplement modifiques o reemplaces, perquè probablement tinguis analítiques que t'indiquin la tecnologia que utilitzen les persones que hi accedeixen. Si no tens analítiques o es tracta un lloc web totalment nou, hi ha llocs com ara <a href="http://gs.statcounter.com/">Statcounter</a> que poden proporcionar estadístiques filtrades segons la ubicació.</p>
+
+<p>També has de considerar el tipus de dispositius i la manera com la gent utilitza el teu lloc web; per exemple, potser esperes un nombre de dispositius mòbils superior a la mitjana. Sempre s’ha de tenir en compte l’accessibilitat i les persones que utilitzen tecnologia d’assistència, però per a alguns llocs pot ser encara més crític. Segons experiència pròpia, els desenvolupadors sovint es preocupen massa per l’experiència de l’1% d’usuaris en una versió antiga d’Internet Explorer, i no consideren del tot el nombre molt més gran d'usuaris que tenen necessitats d’accessibilitat especials.</p>
+
+<h2 id="La_compatibilitat_de_les_funcions_que_empres">La compatibilitat de les funcions que empres</h2>
+
+<p>Un cop coneixes els navegadors que accedeixen al teu lloc web, pots valorar qualsevol tecnologia que vulguis utilitzar segons la compatibilitat que presenten i la facilitat amb què pots proporcionar una alternativa als visitants que no tenen aquesta tecnologia disponible. Intentem facilitar-te aquesta experiència proporcionant informació de compatibilitat dels navegadors en cadascuna de les pàgines que detallen una propietat CSS. Per exemple, consulta la pàgina de {{cssxref("grid-template-columns")}}. Al final d'aquesta pàgina hi ha una taula que mostra els navegadors principals juntament amb la versió que va començar a admetre aquesta propietat.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16047/browser-table.png" style="height: 1178px; width: 2102px;"></p>
+
+<p>Una altra manera més popular d'esbrinar què és compatible amb una funció és el lloc web <a href="https://caniuse.com/">Can I Use</a>. Aquest lloc web enumera la majoria de funcions de la plataforma web amb informació sobre l'estat de compatibilitat del navegador. Pots veure les estadístiques d’ús per ubicació, fet que resulta útil si treballes en un lloc que té usuaris d'una àrea del món determinada. Fins i tot pots enllaçar el teu compte de Google Analytics per a obtenir anàlisis basades en les teves dades d’usuari.</p>
+
+<p>Entendre la tecnologia que tenen els teus usuaris i les compatibilitats de les funcions que potser vulguis fer servir et proporciona una bona base per a prendre totes les decisions i saber quina és la millor manera de donar suport a tots els teus usuaris.</p>
+
+<h2 id="Compatibilitat_no_significa_«veures_igual»">Compatibilitat no significa «veure's igual»</h2>
+
+<p>És possible que un lloc web no es vegi de la mateixa manera a tots els navegadors, perquè alguns dels teus usuaris accediran al lloc web des d’un dispositiu mòbil i d’altres des de l'ordinador de taula. De la mateixa manera, alguns dels teus usuaris tindran una versió antiga del navegador, i d'altres una de més nova. És possible que alguns dels teus usuaris n’escoltin el contingut amb un lector de pantalla o hagin fet zoom a la pàgina per a poder-la llegir. Donar suport a tothom significa servir una versió del contingut dissenyada estratègicament, de manera que es vegi genial en els navegadors moderns, però que encara puguin utilitzar a un nivell bàsic els usuaris de navegadors més antics.</p>
+
+<p>Un nivell bàsic de compatibilitat prové d’estructurar bé el contingut perquè el flux normal de la pàgina tingui sentit. Pot ser que un usuari amb un telèfon mòbil amb funcions molt limitades no obtingui gran part del teu CSS, però el contingut fluirà de manera que faciliti la lectura. Per tant, un document HTML ben estructurat hauria de ser sempre el punt de partida. <em>El teu contingut té sentit si suprimeixes el full d’estil?</em></p>
+
+<p>Una opció és deixar aquesta visió senzilla del lloc web com a alternativa per a les persones que utilitzen navegadors molt antics o limitats. Si tens un nombre reduït de persones que visiten el lloc amb aquests navegadors, és possible que no tingui sentit comercial dedicar temps a intentar donar-los una experiència similar a la gent que utilitza navegadors moderns. Seria millor dedicar temps a coses que facin més accessible el lloc web, perquè així dones servei a molts més usuaris. Hi ha un punt intermedi entre una pàgina HTML simple i tots aquests recursos, i el CSS ha permès que la creació d'aquestes alternatives sigui bastant senzilla.</p>
+
+<h2 id="La_creació_d’alternatives_demergència_amb_CSS">La creació d’alternatives d'emergència amb CSS</h2>
+
+<p>Les especificacions CSS contenen informació que explica què fa el navegador quan s'apliquen dos mètodes de disseny al mateix element. Això vol dir que hi ha una definició per a què passa si un element flotant, per exemple, també és un element de graella que utilitza disseny de graella CSS. Combina aquesta informació amb el fet que els navegadors ignoren el CSS que no entenen, i tens una manera de crear dissenys senzills amb les <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">tècniques heretades</a> que ja hem explicat, que després se sobreescriuen amb el teu disseny de graella en els navegadors moderns que l’entenen.</p>
+
+<p>En l'exemple següent hem especificat que tres elements de flotació <code>&lt;div&gt;</code> es mostrin en fila. Qualsevol navegador que no admeti el <a href="/ca/docs/Learn/CSS/Disseny_CSS/Graelles">disseny de graella CSS</a> veurà la fila de caixes com un disseny amb el mètode de flotació. Un element de flotació que es converteix en un element de graella perd el comportament de flotació, i això significa que si convertim l'embolcall en un contenidor de graella, els elements de flotació es converteixen en elements de graella. Si el navegador admet el disseny de graella, mostrarà la pàgina en forma de graella; si no l’admet, ignorarà les propietats relacionades amb el disseny de graella i utilitzarà el disseny de flotació.</p>
+
+<div id="Example1">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;Primer element&lt;/div&gt;
+  &lt;div class="item"&gt;Segon element&lt;/div&gt;
+  &lt;div class="item"&gt;Tercer element&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example1', '100%', '200') }}</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: La propietat {{cssxref("clear")}} tampoc té cap efecte un cop l'element es converteix en un element de graella, de manera que pots tenir un composició amb un peu de pàgina esborrat, que es convertirà en un disseny de graella.</p>
+</div>
+
+<h3 id="Mètodes_de_les_solucions_alternatives">Mètodes de les solucions alternatives</h3>
+
+<p>Hi ha diversos mètodes de disseny que es poden utilitzar de manera similar a aquest exemple de flotació. Pots triar el que tingui més sentit per al patró de disseny que has de crear.</p>
+
+<dl>
+ <dd><strong><code>Float</code></strong> i <code><strong><strong>clear</strong></strong></code></dd>
+ <dd>Com s'ha mostrat abans, les propietats <em>float</em> i <em>clear</em> deixen d'afectar el disseny si els elements que passen a ser de flotació o els esborrats es converteixen en elements flexibles o de graella.</dd>
+ <dt><code>display: inline-block</code></dt>
+ <dd>Aquest mètode es pot utilitzar per a crear dissenys de columnes si un element té <code>display: inline-block</code>, però si després es converteix en un element de disseny de tipus flexible o de graella, el comportament <code>inline-block</code> s'ignora.</dd>
+ <dt><code>display: table</code></dt>
+ <dd>El mètode per a crear taules CSS que es descriu en la <a href="/ca/docs/Learn/CSS/Disseny_CSS/Introduccio_disseny_CSS">introducció</a> d'aquests articles es pot utilitzar com a mètode de solució alternativa. Els elements que estiguin configurats en la taula CSS perdran aquest comportament si es converteixen en elements Flexbox o Grid. Però és important destacar que les caixes sense nom que s’han creat per a corregir l'estructura de la taula, no es creen.</dd>
+ <dt>Disseny en diverses columnes</dt>
+ <dd>Pots utilitzar <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">multi-col</a> com a solució alternativa en certs dissenys; si el teu contenidor té definida alguna propietat <code>column-*</code> i es converteix en un contenidor amb comportament de graella, s'anul·la el comportament en columnes.</dd>
+ <dt>Flexbox com a solució alternativa a la graella</dt>
+ <dd><a href="/ca/docs/Learn/CSS/Disseny_CSS/Flexbox">Flexbox</a> té una compatibilitat de navegador més gran que Grid perquè ha rebut el suport d’Internet Explorer 10 i 11, tot i que et recomanem que comprovis la informació que trobaràs més endavant en aquest article sobre la compatibilitat força irregular i confusa de Flexbox en navegadors més antics. Si converteixes un contenidor flexible en un contenidor de graella, s'ignorarà qualsevol propietat <code>flex</code> aplicada als descendents.</dd>
+</dl>
+
+<p>Observa que si fas servir el CSS d'aquesta manera pots proporcionar una experiència d'usuari decent per ajustar moltes compaginacions en navegadors antics. Afegim un disseny més senzill basat en tècniques més antigues i amb bona compatibilitat, i després utilitzem el CSS més recent per a crear el disseny que veurà més del 90% del públic. Hi ha casos, però, en què el codi alternatiu haurà d’incloure alguna cosa que els navegadors nous també interpretaran. Un bon exemple d’això és si afegim amplades percentuals als nostres elements de flotació per aconseguir que les columnes s’assemblin més a la visualització de graella i s’estirin per omplir el contenidor.</p>
+
+<p>En el disseny de flotació, el percentatge es calcula a partir del contenidor: el 33,333% és un terç de l'amplada del contenidor. Tanmateix, a la graella es calcula que el 33,333% es calcula a partir de l’àrea de la graella en què es troba l’element, de manera que es converteix en un terç de la mida que volem un cop introduït el disseny de graella.</p>
+
+<div id="Example2">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;Primer element&lt;/div&gt;
+  &lt;div class="item"&gt;Segon element&lt;/div&gt;
+  &lt;div class="item"&gt;Tercer element&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example2', '100%', '200') }}</p>
+</div>
+
+<p>Per resoldre aquest problema, hem de tenir una manera de detectar si la graella és compatible i, per tant, si anul·larà l'amplada. El CSS té una solució.</p>
+
+<h2 id="Consultar_les_propietats">Consultar les propietats</h2>
+
+<p>Consultar les propietats et permet provar si un navegador admet alguna funció CSS en concret. Això vol dir que pots escriure algun CSS per a navegadors que no admetin una característica determinada, i a continuació comprovar si el navegador és compatible i introduir el teu disseny.</p>
+
+<p>Si afegim una consulta de propietats en l’exemple anterior, podem utilitzar-la per a configurar les amplades dels nostres articles de manera automàtica (<code>auto</code>) si sabem que hi ha compatibilitat amb el disseny de graella.</p>
+
+<div id="Example3">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+@supports (display: grid) {
+  .item {
+      width: auto;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;Primer element&lt;/div&gt;
+  &lt;div class="item"&gt;Segon element&lt;/div&gt;
+  &lt;div class="item"&gt;Tercer element&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example3', '100%', '200') }}</p>
+</div>
+
+<p>La compatibilitat per a la consulta de propietats és molt bona en tots els navegadors moderns, però cal tenir en compte que són els navegadors que no admeten la graella CSS els que tampoc no admeten la consulta de propietats. Això significa que per a aquells navegadors funcionarà un enfocament com el que es detalla més amunt. El que fem és escriure primer el nostre CSS anterior, sense fer cap consulta de propietats. Els navegadors que no admeten la graella i no admeten la consulta de propietats faran servir la informació de disseny que poden comprendre i ignoraran completament la resta. Els navegadors que admeten la consulta de propietats també admeten la graella, i per tant executaran el codi de graella i el codi de la consulta de propietats.</p>
+
+<p>L'especificació per a la consulta de propietats també inclou la possibilitat de comprovar si un navegador no admet una propietat; això només és útil si el navegador admet consultes de propietats. En el futur tindrà sentit un enfocament que comprovi la falta de compatibilitats, perquè ja no existiran els navegadors que no disposen de compatibilitats per a la consulta. Ara, però, utilitza l’enfocament de fer servir el CSS anterior i sobreescriure'l per a obtenir la millor compatibilitat.</p>
+
+<h2 id="Les_versions_anteriors_de_Flexbox">Les versions anteriors de Flexbox</h2>
+
+<p>En versions anteriors dels navegadors, pots trobar versions anteriors de l'especificació Flexbox. En el moment d’escriure això, es tracta principalment d’un problema amb Internet Explorer 10, que utilitza el prefix <code>-ms-</code> per a Flexbox. Això també significa que hi ha articles i tutorials obsolets; <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">aquesta guia útil</a> t'ajuda a comprovar el que busques, i també pot ajudar-te si necessites compatibilitat Flexbox en navegadors molt antics.</p>
+
+<h2 id="La_versió_prefixada_de_graella_de_l’Internet_Explorer_10_i_11">La versió prefixada de graella de l’Internet Explorer 10 i 11</h2>
+
+<p>L'especificació de graella CSS es va prototipar inicialment en Internet Explorer 10; això vol dir que, tot i que IE10 i IE11 no disposen de compatibilitat de graella <em>moderna</em>, sí que tenen una versió de disseny de graella molt útil, tot i que diferent de l’especificació moderna que documentem en aquest lloc. Les implementacions d’IE10 i 11 tenen el prefix <code>-ms-</code>, que significa que les pots utilitzar per a aquests navegadors i que s'ignoraran en els navegadors que no formin part de Microsoft. Tanmateix, Edge encara entén la sintaxi antiga, així que tingues cura que tot es sobreescrigui de manera segura al teu CSS de graella moderna.</p>
+
+<p>La guia per a la <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Millora progressiva del disseny de graella</a> et pot ajudar a comprendre la versió de la graella d’Internet Explorer, i hem inclòs alguns enllaços útils addicionals al final d'aquest article. Tanmateix, a menys que tinguis un nombre molt elevat de visitants en versions d’Internet Explorer més antigues, potser és millor centrar-te en la creació d’una alternativa que funcioni per a tots els navegadors no compatibles.</p>
+
+<h2 id="Proves_amb_navegadors_antics">Proves amb navegadors antics</h2>
+
+<p>Atès que la majoria de navegadors admeten Flexbox i la graella, pot ser raonablement difícil fer proves amb navegadors més antics. Una de les maneres és utilitzar una eina de prova en línia com Sauce Labs, tal i com es detalla en el mòdul de <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">comprovació de compatibilitat entre navegadors</a>.</p>
+
+<p>També pots descarregar i instal·lar màquines virtuals i executar versions anteriors de navegadors en un entorn contingut en el teu ordinador. Tenir accés a versions anteriors d’Internet Explorer és especialment útil, i amb aquest propòsit Microsoft ha posat a disposició dels usuaris una <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">varietat de màquines virtuals de descàrrega gratuïta</a>. Estan disponibles per als sistemes operatius Mac, Windows i Linux, i per tant són una bona manera de fer proves en navegadors Windows antics i moderns, encara que no utilitzis un ordinador amb sistema operatiu de Windows.</p>
+
+<h2 id="Resum">Resum</h2>
+
+<p>Ara tens el coneixement per utilitzar tècniques de confiança com ara Grid i Flexbox, crear solucions alternatives per a navegadors més antics i utilitzar qualsevol tècnica nova que pugui aparèixer en el futur.</p>
+
+<h2 id="Consulta_també">Consulta també</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">L'ús de la consulta de propietats en CSS</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Compatibilitat amb versions anteriors de Flexbox</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Disposició de graella CSS i millora progressiva</a></li>
+ <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">L'ús de la graella CSS: Compatibilitat amb navegadors sense comportament de graella</a></li>
+ <li><a href="https://24ways.org/2012/css3-grid-layout/">Un tutorial que utilitza les versions IE10 i 11 de graella</a></li>
+ <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">Hauria d’intentar utilitzar la implementació IE10 de disseny de graella?</a></li>
+ <li><a href="https://24ways.org/2017/cascading-web-design/">Disseny web en cascada amb consulta de propietats</a></li>
+ <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">L'ús de les consultes de propietats (vídeo)</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="En_aquest_mòdul">En aquest mòdul</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducció al disseny CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flux normal</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Graella (Grid)</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotació</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionament</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disseny en columnes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">El disseny adaptatiu</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guia d’iniciació a les consultes de mèdies</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Mètodes heretats de disseny de pàgines web</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilitat amb navegadors antics</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Avaluació del conjunt d'elements bàsics del disseny</a></li>
+</ul>