path: root/files/es/learn/css/css_layout/grids/index.html

---
title: Cuadrículas
slug: Learn/CSS/CSS_layout/Grids
translation_of: Learn/CSS/CSS_layout/Grids
---
<div>{{LearnSidebar}}</div>

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

<p class="summary">La compaginación en cuadrícula con CSS es un método de diseño de páginas web en dos dimensiones. Te permite distribuir el contenido en filas y columnas, y tiene muchas características que facilitan la creación de diseños complejos. Este artículo te proporciona todo lo que necesitas saber para comenzar con el diseño de páginas web.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerrequisitos:</th>
   <td>Conceptos básicos de HTML (véase <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducción al HTML</a>) y una idea de cómo funciona el CSS (véase <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducción al CSS</a>).</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Entender los conceptos fundamentales que hay detrás de los métodos de compaginación en cuadrícula y de cómo implementar una compaginación en cuadrícula con CSS.</td>
  </tr>
 </tbody>
</table>

<h2 id="¿Qué_es_la_compaginación_en_cuadrícula">¿Qué es la compaginación en cuadrícula?</h2>

<p>Una cuadrícula es un conjunto de líneas horizontales y verticales que crean un patrón sobre el que podemos alinear nuestros elementos de diseño. Las cuadrículas nos ayudan a crear diseños de página en que los elementos no saltan ni cambian de ancho cuando nos movemos de una página a otra, y así proporcionan a nuestras páginas web un aspecto más coherente.</p>

<p>Una cuadrícula en general tiene <strong>columnas</strong>, <strong>filas</strong> y luego espacios entre cada fila y cada columna, conocidos comúnmente como <strong>canales</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_tu_cuadrícula_con_CSS">Crear tu cuadrícula con CSS</h2>

<p>Una vez que has decidido qué tipo de cuadrícula necesita tu diseño de página, puedes usar la compaginación en cuadrícula con CSS para crear esa cuadrícula y posicionar elementos en ella. Primero veremos las características básicas de la compaginación en cuadrícula y luego exploraremos cómo crear un método de compaginación de cuadrícula sencilla para tu proyecto.</p>

<h3 id="Definir_una_cuadrícula">Definir una cuadrícula</h3>

<p>Como punto de partida, descárgate el <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">archivo de punto de partida</a> y ábrelo en tu editor de texto y tu navegador (también puedes <a href="https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html">verlo en vivo aquí</a>). Hay un ejemplo con un contenedor que tiene algunos elementos hijo. Por defecto, estos se muestran en flujo normal, por lo que las cajas se muestran una debajo de la otra. Vamos a trabajar con este archivo durante la primera parte de este artículo, y vamos a hacer cambios en él para ver cómo se comporta la cuadrícula.</p>

<p>Para definir una cuadrícula utilizamos el valor <code>grid</code> de la propiedad {{cssxref ("display")}}. Al igual que con el método Flexbox, esto activa la compaginación de cuadrícula y todos los elementos que son hijos directos del contenedor se convierten en elementos de cuadrícula. Añade esto al CSS en tu archivo:</p>

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

<p>A diferencia del método Flexbox, los elementos no se ven diferentes inmediatamente. La declaración <code>display: grid</code> te proporciona una cuadrícula de una sola columna, por lo que tus elementos continúan mostrándose uno debajo del otro, como lo hacen en el flujo normal.</p>

<p>Para ver algo que se parezca más a una cuadrícula, necesitamos añadir columnas a la cuadrícula. Vamos a añadir tres columnas de 200 píxeles. Puedes usar cualquier unidad de longitud o porcentajes para crear estas trazas de columna.</p>

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

<p>Añade la segunda declaración a tu regla CSS, luego vuelve a cargar la página y observa que los elementos se reubican uno en cada celda de la cuadrícula que has creado.</p>

<div id="Grid_1">
<div class="hidden">
<h6 id="Ejemplo_sencillo_de_cuadrícula">Ejemplo sencillo de cuadrícula</h6>

<pre class="brush: css">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">&lt;div class="container"&gt;
 &lt;div&gt;Uno&lt;/div&gt;
 &lt;div&gt;Dos&lt;/div&gt;
 &lt;div&gt;Tres&lt;/div&gt;
 &lt;div&gt;Cuatro&lt;/div&gt;
 &lt;div&gt;Cinco&lt;/div&gt;
 &lt;div&gt;Seis&lt;/div&gt;
 &lt;div&gt;Siete&lt;/div&gt;
&lt;/div&gt; </pre>

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

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

<h3 id="Cuadrículas_flexibles_con_la_unidad_fr">Cuadrículas flexibles con la unidad fr</h3>

<p>Además de crear cuadrículas con longitudes y porcentajes, podemos usar la unidad <code>fr</code> para dimensionar de manera flexible las filas y columnas de la cuadrícula. Esta unidad representa una fracción del espacio disponible en el contenedor de la cuadrícula.</p>

<p>Cambia tu lista de trazas en la definición siguiente para crear tres trazas <code>1fr</code>.</p>

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

<p>Ahora deberías observar que tus trazas son flexibles. La unidad <code>fr</code> distribuye el espacio por proporciones, de modo que puedes dar valores positivos diferentes a sus trazas, por ejemplo, si cambias la definición de la manera siguiente:</p>

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

<p>Ahora la primera traza tiene <code>2fr</code> del espacio disponible, y las otras dos trazas tienen <code>1fr</code>, lo que da una primera traza más grande. Puedes mezclar unidades <code>fr</code> y trazas de longitud fija; en tal caso, el espacio que se necesita para las trazas fijas se descuenta del espacio en que se distribuyen las otras trazas.</p>

<div id="Grid_2">
<div class="hidden">
<h6 id="Ejemplo_de_cuadrícula_sencilla_con_unidades_fr">Ejemplo de cuadrícula sencilla con unidades fr</h6>

<pre class="brush: css">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">&lt;div class="container"&gt;
  &lt;div&gt;Uno&lt;/div&gt;
  &lt;div&gt;Dos&lt;/div&gt;
  &lt;div&gt;Tres&lt;/div&gt;
  &lt;div&gt;Cuatro&lt;/div&gt;
  &lt;div&gt;Cinco&lt;/div&gt;
  &lt;div&gt;Seis&lt;/div&gt;
  &lt;div&gt;Siete&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
</div>

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

<div class="note">
<p><strong>Nota</strong>: La unidad <code>fr</code> distribuye el espacio <em>disponible</em>, no <em>todo</em> el espacio. Por lo tanto, si una de tus trazas tiene algo grande dentro, habrá menos espacio libre para compartir.</p>
</div>

<h3 id="Los_espacios_entre_trazas">Los espacios entre trazas</h3>

<p>Para crear espacios entre trazas, utilizamos las propiedades {{cssxref ("grid-column-gap")}} para los espacios entre columnas, {{cssxref ("grid-row-gap")}} para los espacios entre filas, y {{ cssxref ("grid-gap")}} para configurar ambos a la vez.</p>

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

<p>Estos espacios pueden expresarse en cualquier unidad de longitud o en porcentaje, pero no en unidades <code>fr</code>.</p>

<div id="Grid_3">
<div class="hidden">
<h6 id="Ejemplo_2_de_cuadrícula_sencilla_con_unidades_fr">Ejemplo 2 de cuadrícula sencilla con unidades fr</h6>

<pre class="brush: css">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">&lt;div class="container"&gt;
  &lt;div&gt;Uno&lt;/div&gt;
  &lt;div&gt;Dos&lt;/div&gt;
  &lt;div&gt;Tres&lt;/div&gt;
  &lt;div&gt;Cuatro&lt;/div&gt;
  &lt;div&gt;Cinco&lt;/div&gt;
  &lt;div&gt;Seis&lt;/div&gt;
  &lt;div&gt;Siete&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>

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

<div class="note">
<p><strong>Nota</strong>: Las propiedades <code>*gap</code> solían tener el prefijo <code>grid-</code>, pero esto se ha cambiado en la especificación, porque la intención es hacerlas compatibles con diversos métodos de diseño. Por el momento, Edge y Firefox admiten las versiones sin prefijo, y las versiones con prefijo se mantienen como un alias, por lo que será seguro usarlas durante algún tiempo. Para quedarte en lo seguro, y que tu código sea más a prueba de balas, puedes duplicar y añadir ambas propiedades.</p>
</div>

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

<h3 id="Repetir_listas_de_trazas">Repetir listas de trazas</h3>

<p>Puedes repetir todas tus trazas, o una sección de tu lista de trazas, con la notación de repetición. Cambia tu lista de trazas por lo siguiente:</p>

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

<p>Ahora vas a tener 3 trazas de <code>1fr</code>, igual que antes. El primer valor que pasas a la función de repetición son las veces que deseas que la lista se repita, mientras que el segundo valor es una lista de trazas, que puede constar de una o más trazas.</p>

<h3 id="La_cuadrícula_implícita_y_explícita">La cuadrícula implícita y explícita</h3>

<p>Hasta ahora solo hemos especificado trazas de columna y, sin embargo, también creamos filas para contener nuestro contenido. Este es un ejemplo de una cuadrícula explícita con respecto a una implícita. La cuadrícula explícita es la que creas usando <code>grid-template-columns</code> o <code>grid-template-rows</code>. La cuadrícula implícita se crea cuando el contenido se posiciona fuera de esa cuadrícula, como en nuestras filas. Las cuadrículas explícitas e implícitas son análogas a los ejes principales y transversales del método Flexbox.</p>

<p>Por defecto, las trazas que se crean en la cuadrícula implícita tienen un tamaño <code>auto</code>, lo que en general significa que son lo bastante grandes para ajustarse a su contenido. Si deseas asignar un tamaño a las trajas de las cuadrícula implícitas, puedes usar las propiedades {{cssxref ("grid-auto-rows")}} y {{cssxref ("grid-auto-columns")}}. Si añades <code>grid-auto-rows</code> con un valor de <code>100px</code> a tu CSS, observa que esas filas que has creado ahora tienen 100 píxeles de alto.</p>

<div id="Grid_4">
<div class="hidden">
<h6 id="Ejemplo_3_de_cuadrícula_sencilla_con_unidades_fr">Ejemplo 3 de cuadrícula sencilla con unidades fr</h6>

<pre class="brush: css">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">&lt;div class="container"&gt;
  &lt;div&gt;Uno&lt;/div&gt;
  &lt;div&gt;Dos&lt;/div&gt;
  &lt;div&gt;Tres&lt;/div&gt;
  &lt;div&gt;Cuatro&lt;/div&gt;
  &lt;div&gt;Cinco&lt;/div&gt;
  &lt;div&gt;Seis&lt;/div&gt;
  &lt;div&gt;Siete&lt;/div&gt;
&lt;/div&gt;</pre>
</div>

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

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

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

<p>Nuestras trazas de 100 píxeles de altura no serán muy útiles si en esas trazas añadimos contenido cuya altura sea mayor que 100 píxeles, porque ello causaría un desbordamiento. Puede ser mejor tener trazas cuya altura sea de <em>al menos</em> 100 píxeles y que puedan expandirse si en ellas entra más contenido. Un hecho en realidad básico sobre la web es que nunca sabes qué altura va a tener algo; contenido adicional o tamaños de letra más grandes pueden causar problemas con los diseños que pretendes ser perfectos con todas las dimensiones en píxeles.</p>

<p>La función <code>minmax</code> permite establecer unos tamaños mínimo y máximo para una traza, por ejemplo, <code>minmax(100px, auto)</code>. El tamaño mínimo es de 100 píxeles, pero el máximo es <code>auto</code>, que se expande para adaptarse al contenido. Prueba a cambiar <code>grid-auto-rows</code> para usar un valor minmax:</p>

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

<p>Observa que si añades contenido la traza se expande para permitir que se ajuste. Ten en cuenta que la expansión se produce en la dirección de la fila.</p>

<h3 id="Tantas_columnas_como_quepan">Tantas columnas como quepan</h3>

<p>Podemos combinar algunas de las cosas que hemos aprendido sobre las listas de trazas, la notación de repetición y la función <code>minmax()</code> para crear un patrón útil. A veces es útil poder pedirle a la cuadrícula que cree tantas columnas como quepan en el contenedor. Para hacer esto establecemos el valor <code>grid-template-columns</code> con la notación <code>repeat()</code>, pero en lugar de pasar un número, pasa la palabra clave <code>auto-fill</code>. Para el segundo parámetro de la función usamos <code>minmax()</code>, con un valor mínimo igual al tamaño mínimo de la traza que nos gustaría tener, y un valor máximo de <code>1fr</code>.</p>

<p>Prueba esto en tu archivo ahora, con el CSS siguiente:</p>

<div id="Grid_5">
<div class="hidden">
<h6 id="Tantas_columnas_como_quepan_2">Tantas columnas como quepan</h6>

<pre class="brush: css">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">&lt;div class="container"&gt;
  &lt;div&gt;Uno&lt;/div&gt;
  &lt;div&gt;Dos&lt;/div&gt;
  &lt;div&gt;Tres&lt;/div&gt;
  &lt;div&gt;Cuatro&lt;/div&gt;
  &lt;div&gt;Cinco&lt;/div&gt;
  &lt;div&gt;Seis&lt;/div&gt;
  &lt;div&gt;Siete&lt;/div&gt;
&lt;/div&gt;</pre>
</div>

<pre class="brush: css">.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>Esto funciona porque la cuadrícula crea tantas columnas de 200 píxeles como caben en el contenedor, luego comparte el espacio restante entre todas las columnas: el máximo es 1fr, que como sabemos, distribuye el espacio de manera uniforme entre las trazas.</p>

<h2 id="Posicionamiento_sobre_las_líneas_de_base">Posicionamiento sobre las líneas de base</h2>

<p>Ahora pasamos de crear una cuadrícula a colocar cosas en la cuadrícula. Nuestra cuadrícula siempre tiene líneas; estas líneas comienzan en 1 y se relacionan con el modo de escritura del documento. Por lo tanto, en español, la línea de columna 1 es la de la izquierda de la cuadrícula y la línea de fila 1 es la de la parte superior. En una columna arábiga, la línea 1 estaría en el lado derecho, ya que el árabe se escribe de derecha a izquierda.</p>

<p>Podemos posicionar los elementos de acuerdo con estas líneas si especificamos las líneas de inicio y final. Hacemos esto con las propiedades siguientes:</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>Todas estas propiedades pueden tener un número de línea como valor. También puedes usar las propiedades abreviadas:</p>

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

<p>Estas te permiten especificar a la vez las líneas de inicio y final, separadas por un carácter de barra diagonal: <code>/</code>.</p>

<p>Descarga este <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">archivo de punto de partida</a> o <a href="https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html">míralo en vivo aquí</a>. Ya hay una cuadrícula definida y un elemento sencillo esbozado. Puedes observar que el posicionamiento automático coloca un elemento en cada celda de la cuadrícula que hemos creado.</p>

<p>Nosotros vamos a utilizar en lugar de ello las líneas de cuadrícula para posicionar sobre la cuadrícula todos los elementos de nuestro sitio web. Añade al final de tu código CSS las reglas siguientes:</p>

<pre class="brush: css">header {
  grid-column: 1 / 3;
  grid-row: 1;
}

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

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

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

<div id="Grid_6">
<div class="hidden">
<h6 id="Posicionamiento_sobre_las_líneas_de_base_2">Posicionamiento sobre las líneas de base</h6>

<pre class="brush: css">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">&lt;div class="container"&gt;
  &lt;header&gt;Este es mi blog&lt;/header&gt;
  &lt;article&gt;
    &lt;h1&gt;Mi artículo&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;Otras cosas&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;Contáctame: me@mysite.com&lt;/footer&gt;
&lt;/div&gt;</pre>
</div>
</div>

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

<div class="note">
<p><strong>Nota</strong>: también puedes usar el valor <code>-1</code> para señalar la columna del final o la fila del final, y contar hacia atrás desde el final con valores negativos. Sin embargo, esto solo funciona con la cuadrícula explícita. El valor <code>-1</code> no señala la línea del final de la cuadrícula implícita.</p>
</div>

<h2 id="Posicionamiento_con_grid-template-areas">Posicionamiento con grid-template-areas</h2>

<p>Una forma alternativa de posicionar elementos en tu cuadrícula es usar la propiedad {{cssxref ("grid-template-areas")}} y asignar un nombre a los diversos elementos de tu diseño.</p>

<p>Elimina el posicionamiento sobre las líneas de base del último ejemplo (o vuelve a descargar el archivo para tener un punto de partida nuevo) y añade el código CSS siguiente.</p>

<pre class="brush: css">.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>Vuelve a cargar la página y observa que tus elementos se han colocado como antes ¡sin necesidad de usar números de línea!</p>

<div id="Grid_7">
<div class="hidden">
<h6 id="Posicionamiento_sobre_las_líneas_de_base_3">Posicionamiento sobre las líneas de base 3</h6>

<pre class="brush: css">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">&lt;div class="container"&gt;
  &lt;header&gt;Este es mi blog&lt;/header&gt;
  &lt;article&gt;
    &lt;h1&gt;Mi artículo&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;Otras cosas&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;Contáctame: me@mysite.com&lt;/footer&gt;
&lt;/div&gt;</pre>
</div>
</div>

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

<p>Las reglas para <code>grid-template-areas</code> son las siguientes:</p>

<ul>
 <li>Hay que tener todas las celdas de la cuadrícula llenas.</li>
 <li>Para abarcar el ancho de dos celdas, repite el nombre.</li>
 <li>Para dejar una celda vacía, utiliza un punto: <code>.</code>.</li>
 <li>Las áreas han de ser rectangulares; por ejemplo, no puedes haber un área en forma de L.</li>
 <li>Las áreas no pueden repetirse en lugares diferentes.</li>
</ul>

<p>Puedes jugar con nuestro diseño, por ejemplo, cambiar el pie de página para que esté solo debajo del contenido, y la barra lateral para abarcar todo. Esta manera de describir un diseño de página es muy adecuada porque resulta obvio a partir del CSS qué sucede exactamente.</p>

<h2 id="Una_cuadrícula_CSS_formato_de_cuadrícula">Una cuadrícula CSS, formato de cuadrícula</h2>

<p>Los «formatos» de cuadrícula tienden a basarse en cuadrículas de 12 o 16 columnas, y con las cuadrículas CSS no necesitas ninguna herramienta de terceros para proporcionarte dicho formato, porque ya está en la especificación.</p>

<p>Descárgate el <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">archivo de punto de partida</a>. Contiene un contenedor con una cuadrícula de 12 columnas definida y el mismo código de marcado que usamos en los dos ejemplos anteriores. Ahora podemos usar el posicionamiento sobre las líneas de base para colocar nuestro contenido en la cuadrícula de 12 columnas.</p>

<pre class="brush: css">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="Un_método_de_compaginación_en_cuadrícula_con_CSS">Un método de compaginación en cuadrícula con CSS</h6>

<pre class="brush: css">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">&lt;div class="container"&gt;
  &lt;header&gt;Este es mi blog&lt;/header&gt;
  &lt;article&gt;
    &lt;h1&gt;Mi artículo&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;Otras cosas&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;Contáctame: me@mysite.com&lt;/footer&gt;
&lt;/div&gt;</pre>
</div>
</div>

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

<p>Si usas el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">inspector de cuadrícula de Firefox</a> para ver una superposición de las líneas de cuadrícula sobre tu diseño, puedes observar cómo funciona nuestra cuadrícula de 12 columnas.</p>

<p><img alt="Una superposición de la cuadrícula de 12 columnas de nuestro diseño de página." src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png" style="height: 1026px; width: 2028px;"></p>

<h2 id="¡Pon_a_prueba_tus_conocimientos!">¡Pon a prueba tus conocimientos!</h2>

<p>Has llegado al final de este artículo, pero ¿recuerdas la información más importante? Encontrarás test de prueba que te permitirán verificar que has asimilado esta información antes de continuar en: <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">Pon a prueba tus conocimientos: Cuadrículas</a>.</p>

<h2 id="Resumen">Resumen</h2>

<p>En esta descripción general, hemos recorrido las características principales del diseño páginas web con cuadrícula CSS. Deberías poder comenzar a usarlo en tus diseños. Para profundizar en la especificación, lee nuestras guías para el diseño de página con cuadrícula, que puedes encontrar a continuación.</p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout#Guides">Guías de cuadrícula CSS</a></li>
 <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Inspector de cuadrícula CSS: Examinar diseños de cuadrícula</a></li>
</ul>

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

<h2 id="En_este_módulo">En este módulo</h2>

<ul>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducción al diseño CSS</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flujo 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">Cuadrícula</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotación</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño en columnas</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Diseño adaptativo</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a media</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de compaginación heredados</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad con navegadores antiguos</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de elementos básicos de compaginación</a></li>
</ul>