initial commit

9 files changed, 3451 insertions, 0 deletions

diff --git a/files/es/learn/css/css_layout/diseño_receptivo/index.html b/files/es/learn/css/css_layout/diseño_receptivo/index.html
new file mode 100644
index 0000000000..4ddb7a94db
--- /dev/null
+++ b/files/es/learn/css/css_layout/diseño_receptivo/index.html
@@ -0,0 +1,324 @@
+---
+title: Diseño receptivo
+slug: Learn/CSS/CSS_layout/Diseño_receptivo
+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 los primeros días del diseño web, las páginas se diseñaban para llenar un tamaño de pantalla en particular. Si el usuario tenía una pantalla más grande o más pequeña que la del diseñador, los resultados esperados iban desde barras de desplazamiento no deseadas hasta longitudes de línea excesivamente largas y un mal uso del espacio. A medida que estuvieron disponibles tamaños de pantalla más diversos, apareció el concepto de <em>diseño web responsivo </em> (RWD, <em>responsive web design</em>), un conjunto de prácticas que permite a las páginas web alterar su diseño y apariencia para adaptarse a diferentes anchos de pantalla, resoluciones, etc. Es una idea que cambió la forma en que diseñamos para una web multidispositivo, y en este artículo te ayudaremos a comprender las principales técnicas que necesitas saber para dominarlo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos en CSS</a> y <a href="/es/docs/Learn/CSS/Building_blocks">Los elementos básicos del CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender los conceptos fundamentales y la historia del diseño responsivo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Diseños_de_sitios_web_históricos">Diseños de sitios web históricos</h2>
+
+<p>En un momento de la historia, solo tenías dos opciones al diseñar un sitio web:</p>
+
+<ul>
+ <li>Podías crear un sitio <em>líquido</em>, que se expandiría para llenar toda la ventana del navegador</li>
+ <li>o un sitio de <em>ancho fijo</em>, que sería un tamaño fijo en píxeles.</li>
+</ul>
+
+<p>Estos dos enfoques tendían a dar como resultado un sitio web que se veía mejor ¡en la pantalla de la persona que diseñaba el sitio! El sitio líquido dio como resultado un diseño encogido en las pantallas que eran más pequeñas (como se ve a continuación) o longitudes de línea interminables en las pantallas que eran más grandes.</p>
+
+<figure><img alt="Un diseño de página con dos columnas encogidas en una ventana gráfica del tamaño de un teléfono móvil." 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 este <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">ejemplo</a> y su <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">código fuente</a> de un diseño líquido sencillo. Amplía o reduce la ventana del navegador y observa cómo cambia su aspecto en diferentes tamaños.</p>
+</div>
+
+<p>El sitio de ancho fijo se arriesgaba a una barra de desplazamiento horizontal en pantallas que eran más pequeñas que el ancho del sitio (como se ve a continuación), y a un gran espacio en blanco en los bordes del diseño en las pantallas que eran más grandes.</p>
+
+<figure><img alt="Un diseño con una barra de desplazamiento horizontal en una ventana de teléfono móvil." 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 este <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">ejemplo</a> y su <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">código fuente</a> de un diseño sencillo con un ancho fijo. Nuevamente, cambia el tamaño de la ventana del navegador y observa el resultado.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Las capturas de pantalla anteriores se han tomado usando el <a href="/es/docs/Tools/Responsive_Design_View">modo de diseño responsivo</a> de las herramientas DevTools de Firefox.</p>
+</div>
+
+<p>A medida que la web móvil comenzó a hacerse realidad con los primeros teléfonos con funciones, las empresas que deseaban adoptar los dispositivos móviles solían crear una versión especial de su sitio web para dispositivo móvil, con una URL diferente (a menudo algo así como <em>m.example.com</em> o <em>example.mobi</em>). Esto significaba que había que desarrollar y actualizar dos versiones independientes del sitio web.</p>
+
+<p>Además, estos sitios web para dispositivos móviles a menudo ofrecían una experiencia muy reducida. A medida que los dispositivos móviles se volvían más potentes y capaces de mostrar sitios web completos, esto resultaba frustrante para los usuarios de dispositivos móviles, que se veían atrapados en la versión móvil del sitio web y no podían acceder a la información que sabían que había en la versión de escritorio, que incluía todas las funciones del sitio web.</p>
+
+<h2 id="Diseño_flexible_antes_del_diseño_responsivo">Diseño flexible antes del diseño responsivo</h2>
+
+<p>Se desarrollaron varios enfoques para tratar de resolver los inconvenientes de los métodos líquidos o de ancho fijo para crear sitios web. En 2004, Cameron Adams escribió una publicación titulada <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Resolution dependent layout</a>, que describe un método para crear un diseño que podría adaptarse a diferentes resoluciones de pantalla. Este enfoque requería JavaScript para detectar la resolución de la pantalla y cargar el CSS correcto.</p>
+
+<p>Zoe Mickley Gillenwater fue determinante en <a href="http://zomigi.com/blog/voices-that-matter-slides-available/">su trabajo</a> de descripción y formalización de los diversos modos en que se podían crear sitios web flexibles para intentar encontrar una situación intermedia entre llenar toda la pantalla o tener un tamaño completamente fijo.</p>
+
+<h2 id="Diseño_responsivo">Diseño responsivo</h2>
+
+<p>El término <em>diseño responsivo</em> fue acuñado por <a href="https://alistapart.com/article/responsive-web-design/">Ethan Marcotte en 2010</a>, y describía el uso combinado de tres técnicas.</p>
+
+<ol>
+ <li>La primera era la idea de las redes fluidas, algo que ya exploraba Gillenwater, y que puede leerse en el artículo de Marcotte, <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a> (publicado en 2009 en <em>A list apart</em>).</li>
+ <li>La segunda técnica era la idea de las <a href="http://unstoppablerobotninja.com/entry/fluid-images">imágenes fluidas</a>. Usando una técnica muy simple de establecer la propiedad de <code>max-width</code> al <code>100%</code>, las imágenes se reducían si su columna de contención se volvía más estrecha que el tamaño intrínseco de la imagen, pero nunca se expandía. Esto permite reducir una imagen para que se ajuste a una columna de tamaño flexible, en lugar de que desborde, pero no se expande ni se pixela si la columna se ensancha más que la imagen.</li>
+ <li>El tercer componente clave era la <a href="/es/docs/Web/CSS/Media_Queries">consulta a los media</a>. Las consultas a los media habilitan el tipo de cambio de diseño que Cameron Adams había explorado previamente usando JavaScript, pero usando solo CSS. En lugar de tener un único diseño para todos los tamaños de pantalla, el diseño podría cambiarse. Las barras laterales pueden reposicionarse en una pantalla más pequeña, o puede mostrarse una navegación alternativa.</li>
+</ol>
+
+<p>Es importante comprender que <strong>el diseño web responsivo no es una tecnología independiente</strong>: es un término utilizado para describir un enfoque para el diseño web, o un conjunto de buenas prácticas utilizado para crear un diseño que puede <em>responder</em> según el dispositivo que se utiliza para ver un contenido. En la exploración original de Marcotte, esto significaba cuadrículas flexibles (mediante elementos flotantes) y consultas de media; sin embargo, en los casi 10 años desde que se escribió ese artículo, trabajar de manera responsiva se ha convertido en la norma. Los métodos de diseño CSS modernos son inherentemente responsivos, y la plataforma web dispone de herramientas integradas nuevas que facilitan el diseño de sitios web responsivos.</p>
+
+<p>El resto de este artículo te indicará las diversas características de la plataforma web que puedas querer utilizar para crear un sitio responsivo.</p>
+
+<h2 id="La_consulta_a_los_media">La consulta a los media</h2>
+
+<p>El diseño responsivo solo pudo surgir gracias a la consulta a los media. La especificación de nivel 3 de consulta a los media se convirtió en una candidata a Recomendación en 2009, lo que significa que se consideró lista para su implementación en los navegadores. Las consultas a los media nos permiten ejecutar una serie de pruebas (por ejemplo, si la pantalla del usuario es mayor que un ancho o una resolución determinados) y aplicar CSS selectivamente para diseñar la página de manera que resulte adecuada a las necesidades del usuario.</p>
+
+<p>Por ejemplo, la consulta a los media siguiente explora si la página web que se muestra lo hace como un medio de pantalla (por lo tanto, no es un documento impreso) y si la ventana tiene al menos 800 píxeles de ancho. El CSS para el selector <code>.container</code> solo se aplicará si ambas condiciones son ciertas.</p>
+
+<pre class="brush: css"><code>@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} </code>
+</pre>
+
+<p>Puedes añadir múltiples consultas a los media dentro de una hoja de estilo, y ajustar todo tu diseño o solo partes de él para que se adapte mejor a los diferentes tamaños de pantalla. Los puntos en los que se introduce una consulta a los media y se cambia el diseño se conocen como <em>puntos de interrupción</em>.</p>
+
+<p>Un enfoque común cuando se usan las consultas a los media es crear un diseño sencillo de una sola columna para dispositivos de pantalla estrecha (por ejemplo, teléfonos móviles), luego implementar un diseño en columnas para pantallas más grandes cuando se sabe que hay suficiente ancho de pantalla para manejarlo. Esto se describe a menudo como diseño <strong>primero móvil</strong>.</p>
+
+<p>Obtén más información sobre las <a href="/es/docs/Web/CSS/Media_Queries">consultas a los media</a> en la documentación de MDN.</p>
+
+<h2 id="Cuadrículas_flexibles">Cuadrículas flexibles</h2>
+
+<p>Los sitios responsivos no solo cambian su diseño entre puntos de interrupción, sino que se construyen sobre cuadrículas flexibles. Una cuadrícula flexible significa que no tienes que centrarte en todos los tamaños de dispositivo posibles y construir para ellos un diseño en píxeles perfecto. Ese enfoque sería imposible dada la gran cantidad de dispositivos de tamaños diferentes que hay, y el hecho de que, al menos en la versión de escritorio, las personas no siempre tienen la ventana de su navegador maximizada.</p>
+
+<p>Al usar una cuadrícula flexible, solo necesitas añadir un punto de interrupción y cambiar el diseño en el punto en que el contenido comienza a verse mal. Por ejemplo, si las longitudes de las líneas se vuelven interminablemente largas a medida que el tamaño de la pantalla aumenta, o una caja se encoje hasta un ancho de dos palabras en cada línea a medida que el tamaño de la pantalla se reduce.</p>
+
+<p>En los primeros días del diseño responsivo, nuestra única opción para el diseño de páginas web era usar <a href="/es/docs/Learn/CSS/CSS_layout/Floats">elementos flotantes</a>. Los diseños de pantalla con elementos flotantes flexibles se lograban dando a cada elemento un ancho porcentual asegurándose de que para toda la página no alcanzara más del 100%. En su trabajo original sobre cuadrículas fluidas, Marcotte detalló una fórmula para tomar un diseño de página web diseñado usando píxeles y convertirlo en porcentajes.</p>
+
+<pre><code>target / context = result </code>
+</pre>
+
+<p>Por ejemplo, si el tamaño de nuestra columna de destino es de 60 píxeles y el contexto (o contenedor) en el que se encuentra es de 960 píxeles, dividimos 60 por 960 para obtener un valor que podemos usar en nuestro CSS, después de mover el separador de cifras decimales dos posiciones a la derecha.</p>
+
+<pre class="brush: css"><code>.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} </code>
+</pre>
+
+<p>Este enfoque se encuentra hoy en muchos lugares de la web, y aquí está documentado en la sección de compaginación de nuestro artículo sobre <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">métodos de compaginación heredados</a>. Es probable que encuentres sitios web que utilizan este enfoque en su trabajo, por lo que vale la pena entenderlo, aunque no vas a construir un sitio web moderno utilizando una cuadrícula flexible basada en elementos flotantes.</p>
+
+<p>El ejemplo siguiente muestra un diseño responsivo sencillo que utiliza consultas a los medios y una cuadrícula flexible. En pantallas estrechas, el diseño de página muestra las cajas en columna una encima de la otra:</p>
+
+<figure><img alt="Una vista de un dispositivo móvil con un diseño de página con cajas en columna vertical una encima de la otra." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<p>En pantallas más anchas se pasa a dos columnas:</p>
+
+<figure><img alt="Una vista de un dispositivo de escritorio con un diseño a dos columnas." 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>: Puedes encontrar el <a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">ejemplo en vivo</a> y el <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">código fuente</a> de este ejemplo en GitHub.</p>
+</div>
+
+<h2 id="Tecnologías_modernas_de_diseño_de_páginas_web">Tecnologías modernas de diseño de páginas web</h2>
+
+<p>Los métodos modernos de diseño de páginas web, como el <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">diseño en columnas</a>, <a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> y <a href="/es/docs/Learn/CSS/CSS_layout/Grids">Grid</a> son responsivos por defecto. Todos estos métodos asumen que tratas de crear una cuadrícula flexible y te proporcionan los modos más fáciles de hacerlo.</p>
+
+<h3 id="Multicol">Multicol</h3>
+
+<p>El más antiguo de estos métodos de diseño de páginas web es multicol. Cuando especificas un atributo <code>column-count</code>, esto indica en cuántas columnas deseas dividir tu contenido. El navegador entonces calcula el tamaño de estas columnas, que cambiará de acuerdo con el tamaño de la pantalla.</p>
+
+<pre class="brush: css"><code>.container {
+  column-count: 3;
+} </code>
+</pre>
+
+<p>Si en lugar de ello estableces el atributo <code>column-width</code>, especificas un ancho <em>mínimo</em>. El navegador crea tantas columnas de ese ancho como quepan cómodamente en el contenedor, y reparte el espacio entre todas las columnas. Por lo tanto, el número de columnas cambia según la cantidad de espacio que hay.</p>
+
+<pre class="brush: css"><code>.container {
+  column-width: 10em;
+} </code>
+</pre>
+
+<h3 id="Flexbox">Flexbox</h3>
+
+<p>En el método Flexbox, los elementos flexibles se encogen y distribuyen el espacio entre los elementos según el espacio que hay en su contenedor, según su comportamiento inicial. Al cambiar los valores de <code>flex-grow</code> y <code>flex-shrink</code>, puedes indicar cómo deseas que se comporten los elementos cuando a su alrededor hay más o menos espacio.</p>
+
+<p>En el ejemplo siguiente, los elementos flexibles ocupan cada uno la misma cantidad de espacio en el contenedor flexible, al utilizar la abreviatura <code>flex: 1</code> como se describe en el artículo <a href="/es/docs/Learn/CSS/CSS_layout/Grids#Cuadr%C3%ADculas_flexibles_con_la_unidad_fr">Flexbox: Dimensionamiento flexible de los elementos flex</a>.</p>
+
+<pre class="brush: css"><code>.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Como ejemplo, hemos reconstruido el anterior diseño de página responsivo sencillo, esta vez usando Flexbox. Puedes ver que ya no necesitamos usar valores de porcentaje extraños para calcular el tamaño de las columnas: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">ejemplo</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">código fuente</a>.</p>
+</div>
+
+<h3 id="Cuadrículas_CSS">Cuadrículas CSS</h3>
+
+<p>En el diseño de cuadrículas con CSS, la unidad <code>fr</code> permite la distribución del espacio disponible en las trazas de la cuadrícula. El ejemplo siguiente crea un contenedor de cuadrícula con tres trazas dimensionadas a <code>1fr</code>. Esto crea tres columnas, cada una de las cuales ocupa una parte del espacio que hay disponible en el contenedor. Puedes obtener más información sobre este enfoque para crear una cuadrícula en el módulo Aprender a diseñar cuadrículas en <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Cuadrículas flexibles con la unidad fr</a>.</p>
+
+<pre class="brush: css"><code>.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: La versión del diseño de página en cuadrícula es aún más simple, ya que podemos definir las columnas en .wrapper: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">ejemplo</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">código fuente</a>.</p>
+</div>
+
+<h2 id="Imágenes_responsivas">Imágenes responsivas</h2>
+
+<p>El enfoque más simple para las imágenes responsivas es el que se describe en los primeros artículos de Marcotte sobre diseño responsivo. Básicamente, tomar una imagen que tenga el tamaño más grande que puedas necesitar, y reducirla. Este continúa siendo un enfoque utilizado hoy en día, y en la mayoría de las hojas de estilo encontrarás en alguna parte el CSS siguiente:</p>
+
+<pre class="brush: css"><code>img {
+  max-width: 100%:
+} </code>
+</pre>
+
+<p>Hay inconvenientes obvios en este enfoque. La imagen puede mostrarse mucho más pequeña que su tamaño intrínseco, lo que representa una pérdida de ancho de banda: un usuario de dispositivo móvil puede descargar una imagen que sea varias veces el tamaño de lo que ve en realidad en la ventana del navegador. Además, es posible que no desees la misma relación de aspecto de la imagen en dispositivos móviles y en ordenadores de escritorio. Por ejemplo, podría ser bueno tener una imagen cuadrada para dispositivos móviles, pero mostrar la misma escena que una imagen horizontal en el escritorio. O bien es posible que, reconociendo el tamaño más pequeño de una imagen en dispositivos móviles, desees mostrar una imagen diferente, que se entienda mejor en un tamaño de pantalla pequeño. Estas cosas no se pueden lograr simplemente reduciendo una imagen.</p>
+
+<p>Las imágenes responsivas, que utilizan el elemento {{htmlelement ("picture")}} y los atributos {{htmlelement ("img")}} <code>srcset</code> y <code>sizes</code> resuelven ambos problemas. Puedes proporcionar varios tamaños junto con «sugerencias» (metadatos que describen el tamaño de pantalla y la resolución para que la imagen sea la más adecuada), y el navegador elije la imagen que resulta más adecuada para cada dispositivo, y se asegura de que el usuario descarga un tamaño de imagen apropiado para el dispositivo que utiliza.</p>
+
+<p>También puedes usar imágenes <em>de director artístico</em>, que proporcionan un recorte o una imagen completamente diferente para diferentes tamaños de pantalla.</p>
+
+<p>Puedes encontrar una <a href="/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">guía detallada de imágenes responsivas en el artículo sobre Aprender HTML</a> en MDN.</p>
+
+<h2 id="Tipografía_responsiva">Tipografía responsiva</h2>
+
+<p>Un elemento de diseño responsivo que todavía no hemos tratado en trabajos anteriores es la idea de la tipografía responsiva. Este concepto describe esencialmente el hecho de cambiar el tamaño de letra según el espacio de pantalla que reflejan las consultas a media.</p>
+
+<p>En este ejemplo, queremos establecer que nuestro encabezado de nivel 1 sea <code>4rem</code>, lo que significa que será cuatro veces nuestro tamaño de letra base. ¡Es un título muy grande! Solo queremos este título de encabezado gigante en los tamaños de pantalla más grandes, por lo tanto, primero creamos un título de encabezado más pequeño y luego usamos las consultas a los media para sobrescribirlo con el tamaño más grande si sabemos que el usuario tiene un tamaño de pantalla de al menos <code>1200px</code>.</p>
+
+<pre class="brush: css"><code>html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} </code>
+</pre>
+
+<p>Hemos editado nuestro ejemplo anterior de cuadrícula responsiva para incluir también el tipo de respuesta utilizando el método descrito. Puedes ver cómo el título de encabezado cambia de tamaño cuando el diseño para a la versión de dos columnas.</p>
+
+<p>En la versión para dispositivo móvil, el encabezado es más pequeño:</p>
+
+<figure><img alt="Un diseño de elementos apilados en columna con un tamaño de título de encabezado pequeño." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<p>Sin embargo, en las versiones de escritorio vemos un tamaño de título de encabezado más grande:</p>
+
+<figure><img alt="Un diseño en dos columnas con un título grande." 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 este ejemplo en: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">ejemplo</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">código fuente</a>.</p>
+</div>
+
+<p>Como muestra este enfoque sobre la tipografía, no es necesario restringir las consultas a medios a cambiar solo el diseño de página. Se pueden usar para ajustar cualquier elemento y hacerlo más útil o atractivo según los diversos tamaños de pantalla.</p>
+
+<h3 id="El_uso_de_unidades_de_ventana_gráfica_para_tipografía_responsiva">El uso de unidades de ventana gráfica para tipografía responsiva</h3>
+
+<p>Un enfoque interesante es utilizar las unidades de ventana gráfica <code>vw</code> para habilitar la tipografía responsiva. <code>1vw</code> es igual al uno por ciento del ancho de la ventana gráfica, lo que significa que si configuras el tamaño del tipo de letra con <code>vw</code>, siempre estará en relación con el tamaño de la ventana gráfica.</p>
+
+<pre class="brush: css">h1 {
+  font-size: 6vw;
+}</pre>
+
+<p>El problema de hacer esto es que el usuario pierde la posibilidad de ampliar cualquier conjunto de texto configurado en unidades <code>vw</code>, porque ese texto siempre está en relación con el tamaño de la ventana gráfica. <strong>Por lo tanto, nunca hay que establecer texto utilizando solo unidades de ventana</strong>.</p>
+
+<p>Hay una solución, que implica el uso de la función <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>. Si añades la unidad <code>vw</code> a un valor establecido con un tamaño fijo, como <code>em</code> o <code>rem</code>, el texto continúa siendo ampliable. Esencialmente, la unidad <code>vw</code> se añade sobre ese valor ampliado:</p>
+
+<pre class="brush: css">h1 {
+  font-size: calc(1.5rem + 3vw);
+}</pre>
+
+<p>Esto significa que necesitamos especificar el tamaño de letra para el título de encabezado una sola vez, en lugar de configurarlo para dispositivos móviles y redefinirlo en las consultas a medios. Luego, el tipo de letra aumenta gradualmente a medida que aumenta el tamaño de la ventana gráfica.</p>
+
+<div class="blockIndicator note">
+<p>Observa un ejemplo en: <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">ejemplo</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">código fuente</a>.</p>
+</div>
+
+<h2 id="La_metaetiqueta_viewport">La metaetiqueta viewport</h2>
+
+<p>Si observas el tipo de letra de una página HTML responsiva, en general vas a encontrar la siguiente etiqueta {{htmlelement ("meta")}} en la cabecera del documento.</p>
+
+<pre class="brush: html"><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;</code>
+</pre>
+
+<p>Esta metaetiqueta informa a los navegadores de los dispositivos móviles que deben establecer el ancho de la ventana gráfica al ancho del dispositivo y escalar el documento al 100% de ese tamaño, de modo que el documento se mostrará al tamaño optimizado para esos dispositivos móviles.</p>
+
+<p>¿Por qué esto es necesario? Porque los navegadores de los dispositivos móviles tienden a mentir sobre el ancho de su ventana gráfica.</p>
+
+<p>Esta metaetiqueta existe porque cuando se lanzó el iPhone original y la gente comenzó a ver sitios web en una pequeña pantalla de teléfono móvil, la mayoría de los sitios web no estaban optimizados para dispositivos móviles. Por lo tanto, el navegador móvil establecía el ancho de la ventana gráfica en 960 píxeles, representaba la página con ese ancho y mostraba el resultado como una versión reducida del diseño del escritorio. Otros navegadores de dispositivos móviles (por ejemplo, en Google Android) hicieron lo mismo. Los usuarios podían acercarse y desplazarse por el sitio web para ver las partes que les interesaban, pero se veía mal. Todavía verás esto hoy en día si tienes la desgracia de encontrarte con un sitio web que no tiene un diseño de página responsivo.</p>
+
+<p>El problema es que tu diseño responsivo con puntos de interrupción y consultas a media no va a funcionar según lo previsto en los navegadores de dispositivos móviles, si tienes un diseño de pantalla estrecho que se inicia con un ancho de ventana de 480px o menos, pero la ventana gráfica está configurada en 960px. E cambio, al configurar <code>width=device-width</code> anulas el ancho predeterminado <code>width=960px</code> de Apple con el ancho real del dispositivo, y tus consultas a media funcionarán según lo previsto.</p>
+
+<p><strong>Por lo tanto, <em>siempre</em> debes incluir la línea de HTML anterior en la cabecera de tus documentos.</strong></p>
+
+<p>Con la metaetiqueta <code>viewport</code> puedes usar otras configuraciones, aunque, en general vas a querer usar la línea anterior.</p>
+
+<ul>
+ <li><code>initial-scale</code>: Establece el zoom inicial de la página, que establecemos en 1.</li>
+ <li><code>height</code>: Establece una altura específica para la ventana gráfica.</li>
+ <li><code>minimum-scale</code>: Establece el nivel mínimo de zoom.</li>
+ <li><code>maximum-scale</code>: Establece el nivel máximo de zoom.</li>
+ <li><code>user-scalable</code>: Impide el zoom si se establece en <code>no</code>.</li>
+</ul>
+
+<p>Deberías evitar el uso de <code>minimum-scale</code> y <code>maximum-scale</code>, y en particular establecer <code>user-scalable</code> en <code>no</code>. Hay que permitir a los usuarios hacer zoom tanto o tan poco como lo necesiten; evitarlo provoca problemas de accesibilidad.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Hay una @regla CSS establecida para reemplazar la metaetiqueta <code>viewport</code>: <a href="/en-US/docs/Web/CSS/@viewport">@viewport</a>. Sin embargo, tiene poca compatibilidad con los navegadores. Se implementó en Internet Explorer y Edge, pero una vez que se lance el navegador Edge basado en Chromium, dejará de formar parte del navegador Edge.</p>
+</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>El diseño responsivo se refiere a un diseño página de un sitio web o una aplicación que responde al entorno en el que se visualiza. Abarca una serie de características y técnicas de CSS y HTML, y ahora es esencialmente el modo como construimos los sitios web de forma predeterminada. Piensa en los sitios web que visitas con tu dispositivo móvil; probablemente sea inusual encontrar un sitio web que tenga la versión de escritorio reducida o en que necesites desplazarse hacia los lados para encontrar las cosas. Esto se debe a que la web se ha movido a este enfoque de diseño responsivo.</p>
+
+<p>Además, lograr diseños responsivos se ha vuelto mucho más fácil con la ayuda de los métodos de diseño que has aprendido en estos artículos. Si eres nuevo en el desarrollo web, hoy tienes muchas más herramientas a tu disposición que en los primeros días del diseño de página responsivo. Por lo tanto, vale la pena verificar la antigüedad de los materiales que consultas. Si bien los artículos históricos continúan siendo útiles, el uso moderno de CSS y HTML facilita mucho la creación de diseños elegantes y útiles, sin importar con qué dispositivo el visitante visita el sitio.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "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">Elementos flotantes</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 responsivo</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a medios</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 de 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>
diff --git a/files/es/learn/css/css_layout/flexbox/index.html b/files/es/learn/css/css_layout/flexbox/index.html
new file mode 100644
index 0000000000..5d2b8cdf36
--- /dev/null
+++ b/files/es/learn/css/css_layout/flexbox/index.html
@@ -0,0 +1,337 @@
+---
+title: Flexbox
+slug: Learn/CSS/CSS_layout/Flexbox
+translation_of: Learn/CSS/CSS_layout/Flexbox
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> es un método de diseño de página unidimensional para compaginar elementos en filas o columnas. Los elementos de contenido se ensanchan para rellenar el espacio adicional y se encogen para caber en espacios más pequeños. En este artículo expondremos todas sus características básicas.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Los conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a usar el sistema de compaginación con elementos flexbox para crear compaginaciones web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Por_qué_flexbox">¿Por qué flexbox?</h2>
+
+<p>Durante mucho tiempo, las únicas herramientas fiables con compatibilidad cruzada entre navegadores disponibles para crear diseños CSS fueron cosas como la <a href="/es/docs/Learn/CSS/CSS_layout/Floats">flotación</a> y el <a href="/es/docs/Learn/CSS/CSS_layout/Positioning">posicionamiento</a>. Están bien y funcionan, pero de alguna manera también limitan bastante y frustran.</p>
+
+<p>Con tales herramientas resulta difícil, si no imposible, lograr obtener en cualquier forma conveniente y flexible un diseño de página sencillo con unos requisitos como los siguientes:</p>
+
+<ul>
+ <li>Centrar verticalmente un bloque de contenido dentro de su elemento padre.</li>
+ <li>Hacer que todos los elementos secundarios de un contenedor ocupen una cantidad igual del ancho/alto disponible, independientemente del ancho/alto que haya disponible.</li>
+ <li>Hacer que todas las columnas en una compaginación en columnas múltiples adopten la misma altura incluso si contienen cantidades diferentes de contenido.</li>
+</ul>
+
+<p>Como verás en las secciones siguientes, los elementos flexbox facilitan mucho algunas tareas de compaginación. ¡Vamos a profundizar en ello!</p>
+
+<h2 id="Presentación_de_un_ejemplo_sencillo">Presentación de un ejemplo sencillo</h2>
+
+<p>En este artículo, te guiaremos por una serie de ejercicios para ayudarte a comprender cómo funcionan los elementos flexbox. Para comenzar, debes hacer una copia local del primer archivo de inicio <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> de nuestro repositorio de GitHub. Cárgalo en un navegador moderno (como Firefox o Chrome) y echa un vistazo al código en tu editor de código. Puedes <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">verlo en vivo aquí</a>.</p>
+
+<p>Verás que hay un elemento {{htmlelement ("header")}} con un encabezado de nivel superior en él, y un elemento {{htmlelement ("section")}} que contiene tres elementos {{htmlelement ("article")}}. Los usaremos para crear una compaginación bastante habitual de tres columnas.</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_qué_elementos_colocar_como_cajas_flexibles">Especificar qué elementos colocar como cajas flexibles</h2>
+
+<p>Para comenzar, vamos a seleccionar qué elementos se van a presentar como cajas flexibles. Para ello, establecemos un valor especial de {{cssxref ("display")}} en el elemento padre de los elementos que deseas editar. En este caso, queremos compaginar los elementos {{htmlelement ("article")}}, por lo que lo establecemos en {{htmlelement ("section")}} (que se convierte en un contenedor flexible):</p>
+
+<pre class="brush: css notranslate">section {
+  display: flex;
+}</pre>
+
+<p>Esto hace que el elemento <code>&lt;section&gt;</code> se convierta en <strong>contenedor flex</strong>, y sus hijos en <strong>elementos flexibles</strong>. El resultado de esto debería ser algo así:</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>Así, esta declaración única nos da todo lo que necesitamos. Increíble, ¿verdad? Tenemos nuestra compaginación en columnas múltiples con columnas de igual tamaño, y todas las columnas tienen la misma altura. Esto se debe a que los valores por defecto que se han asignado a los elementos flexibles (los elementos secundarios del contenedor flexible) están pensados para resolver problemas comunes como este. Veremos más sobre el tema más adelante.</p>
+
+<p>Para que quede claro, reiteremos lo que está sucediendo aquí. El elemento al que le hemos dado un valor de {{cssxref("display")}} de <code>flex</code> actúa como un elemento a nivel de bloque en términos de cómo interactúa con el resto de la página, pero sus elementos secundarios se presentan como elementos flexibles. La siguiente sección explicará con más detalle qué significa esto. Ten en cuenta también que puede usar un valor de <code>display</code> de <code>inline-flex</code> si desea diseñar los elementos secundarios de un elemento como elementos flexibles, pero hacer que ese elemento se comporte como un elemento en línea.</p>
+
+<p>
+ </p><h2 id="El_modelo_flexible">El modelo flexible</h2>
+
+
+<p>Cuando los elementos se presentan como cajas flexibles, se distribuyen con respecto a dos ejes:</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>El <strong>eje principal</strong> (<strong>main axis</strong>) es el eje que corre en la dirección en que se colocan los elementos flexibles (por ejemplo, según se disponen las filas en una página o hacia abajo según se disponen las columnas en una página). El inicio y el final de este eje se denominan <strong>inicio principal</strong> (<strong>main start</strong>) y <strong>final principal</strong> (<strong>main end</strong>).</li>
+ <li>El <strong>eje transversal</strong> (<strong>cross axis</strong>) es el eje que corre perpendicular a la dirección en la que se colocan los elementos flexibles. El inicio y el final de este eje se denominan <strong>inicio transversal</strong> (<strong>cross start</strong>) y <strong>extremo cruzado</strong> (<strong>cross end</strong>).</li>
+ <li>El elemento padre que tiene establecido <code>display: flex</code> (el elemento {{htmlelement ("section")}} en nuestro ejemplo) se llama <strong>contenedor flexible</strong>.</li>
+ <li>Los elementos que se presentan como cajas flexibles dentro del contenedor flexible se denominan <strong>elementos flexibles</strong> (son los elementos {{htmlelement ("article")}} de nuestro ejemplo).</li>
+</ul>
+
+<p>Ten presente esta terminología al avanzar por las secciones posteriores. Si en algún momento te confundes con el uso de estos conceptos, siempre puedes volver atrás a consultarlos.</p>
+
+<h2 id="¿Columnas_o_filas">¿Columnas o filas?</h2>
+
+<p>Los elementos flexbox proporcionan una propiedad llamada {{cssxref ("flex-direction")}} que especifica en qué dirección corre el eje principal (en qué dirección están dispuestos los elementos hijo de un elemento flexbox); por defecto, está establecido en el valor <code>row</code>, por lo que se presenta en una fila en la dirección en que se escribe el idioma predeterminado de tu navegador (de izquierda a derecha, en el caso de un navegador en español).</p>
+
+<p>Añade la declaración siguiente a tu regla {{htmlelement ("section")}}:</p>
+
+<pre class="brush: css notranslate">flex-direction: column;</pre>
+
+<p>Observa que esto vuelve a colocar los elementos en una disposición en columna, al igual que antes de añadir cualquier CSS. Antes de continuar, elimina esta declaración de tu ejemplo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: También puedes compaginar elementos flexibles en una dirección inversa utilizando los valores <code>row-reverse</code> y <code>column-reverse</code>. ¡Experimenta también con estos valores!</p>
+</div>
+
+<h2 id="Delimitar">Delimitar</h2>
+
+<p>Un problema que surge cuando tienes una cantidad fija de ancho o alto en tu diseño es que los hijos de un elemento flexbox eventualmente desbordan el contenedor y rompen el diseño. Echa un vistazo a nuestro ejemplo <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> e intenta <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">verlo en vivo</a> (toma una copia local de este archivo si deseas seguir este ejemplo):</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í vemos que los elementos hijo se salen de su contenedor. Una forma de solucionar esto es añadir la declaración siguiente a tu regla {{htmlelement ("section")}}:</p>
+
+<pre class="brush: css notranslate">flex-wrap: wrap;</pre>
+
+<p>Añade también la declaración siguiente a tu regla {{htmlelement ("article")}}:</p>
+
+<pre class="brush: css notranslate">flex: 200px;</pre>
+
+<p>Pruébalo; observa que al haberlo incluido el aspecto de la compaginación resulta mucho más agradable:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"> Ahora hay varias filas y en cada fila caben tantos elementos hijo de un elemento flexbox como sean necesarios, y cualquier desbordamiento hace saltar el elemento hacia la línea siguiente. La declaración <code>flex: 200px</code> que hemos establecido en los artículos significa que cada uno tendrá al menos 200 px de ancho; discutiremos esta propiedad con más detalle más adelante. Observa también que los últimos elementos hijo de la última fila se agrandan hasta rellenar toda la fila.</p>
+
+<p>Pero aquí podemos hacer mucho más. En primer lugar, cambia el valor de tu propiedad {{cssxref ("flex-direction")}} a <code>row-reverse</code>; ahora verás que todavía tienes tu compaginación en diversas filas, pero comienza desde la esquina opuesta de la ventana del navegador y fluye al revés.</p>
+
+<h2 id="Propiedades_abreviadas_de_flex-flow">Propiedades abreviadas de flex-flow</h2>
+
+<p>En este punto vale la pena señalar que hay una propiedad abreviada para {{cssxref ("flex-direction")}} y {{cssxref ("flex-wrap")}}: {{cssxref ("flex-flow")}}. Así, por ejemplo, puedes reemplazar:</p>
+
+<pre class="brush: css notranslate">flex-direction: row;
+flex-wrap: wrap;</pre>
+
+<p>con</p>
+
+<pre class="brush: css notranslate">flex-flow: row wrap;</pre>
+
+<h2 id="Dimensionamiento_flexible_de_elementos_flexibles">Dimensionamiento flexible de elementos flexibles</h2>
+
+<p>Volvamos ahora a nuestro primer ejemplo y veamos cómo podemos controlar qué proporción de espacio ocupan los elementos flexibles. Inicia tu copia local de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> o toma una copia de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> como nuevo punto de partida (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">consúltalo en vivo</a>).</p>
+
+<p>Primero, añade la regla siguiente al final de tu CSS:</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1;
+}</pre>
+
+<p>Este es un valor de proporción sin unidades que especifica la cantidad de espacio disponible sobre el eje principal que ocupa cada elemento flexible. En este caso, damos a cada elemento {{htmlelement ("article")}} un valor de 1, lo que significa que todos ocuparán una cantidad igual del espacio libre restante después de que se hayan establecido elementos como el área de relleno y el margen. Es una proporción, lo que significa que dar a cada elemento flexible un valor de 400000 tendría exactamente el mismo efecto.</p>
+
+<p>Ahora añade la regla siguiente debajo de la anterior:</p>
+
+<pre class="brush: css notranslate">article:nth-of-type(3) {
+  flex: 2;
+}</pre>
+
+<p>Al actualizar verás que el tercer {{htmlelement ("article")}} ocupa ahora el doble del ancho disponible que los otros dos; ahora hay cuatro unidades de proporción disponibles en total. Los primeros dos elementos flexibles tienen una cada uno, por lo que ocupan 1/4 del espacio disponible cada uno. El tercero tiene dos unidades, por lo que ocupa 2/4 del espacio disponible (o 1/2).</p>
+
+<p>También puedes especificar un valor de tamaño mínimo dentro del valor flexible. Actualiza las reglas para tu artículo de la manera siguiente:</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}</pre>
+
+<p>Esto establece básicamente que «a cada elemento flexible se le da primero 200px del espacio disponible. Después de eso, el resto del espacio disponible se reparte de acuerdo con las unidades de proporción». Actualiza y observa de qué modo se reparte ahora el espacio.</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 del elemento flexbox se puede ver en su flexibilidad/adaptabilidad: si cambias el tamaño de la ventana del navegador o añades otro elemento {{htmlelement ("article")}}, el diseño continúa funcionando bien.</p>
+
+<h2 id="flex_forma_completa_y_abreviada">flex: forma completa y abreviada</h2>
+
+<p>{{cssxref ("flex")}} es una propiedad abreviada que puede especificar hasta tres valores diferentes:</p>
+
+<ul>
+ <li>El valor de proporción sin unidades que ya hemos comentado. Se puede especificar individualmente usando la propiedad {{cssxref ("flex-grow")}}.</li>
+ <li>Un segundo valor de proporción sin unidades, {{cssxref ("flex-shrink")}}, que entra en juego cuando los elementos flexibles desbordan el contenedor. Especifica cuánto de la cantidad desbordada se quita al tamaño de cada elemento flexible para evitar que el contenedor se desborde. Esta es una característica bastante avanzada de flexbox, y no la vamos a exponer en detalle en este artículo.</li>
+ <li>El valor de tamaño mínimo que ya hemos visto. Se puede especificar individualmente usando el valor {{cssxref ("flex-basis")}}.</li>
+</ul>
+
+<p>Recomendamos no usar las propiedades flex sin abreviar a menos que realmente tengas que hacerlo (por ejemplo, para anular algo establecido previamente). Comportan mucho código añadido y suelen aportar confusión.</p>
+
+<h2 id="Alineación_horizontal_y_vertical">Alineación horizontal y vertical</h2>
+
+<p>También puedes usar las funciones de los elementos flexbox para alinear elementos flexibles sobre el eje principal o transversal. Exploremos este aspecto a partir de un ejemplo nuevo: <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">consúltalo en vivo</a>), que vamos a convertir en una barra de herramientas/botones ordenada y flexible. En este momento puedes ver una barra de menú horizontal, con algunos botones pegados en línea a la esquina superior izquierda.</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>Primero, toma una copia local de este ejemplo.</p>
+
+<p>Ahora, añade a la parte inferior del CSS del ejemplo lo siguiente:</p>
+
+<pre class="brush: css notranslate">div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>Actualiza la página y observa que los botones ahora están convenientemente centrados, horizontal y verticalmente. Lo hemos hecho a partir de dos propiedades nuevas.</p>
+
+<p>{{cssxref ("align-items")}} controla dónde se ubican los elementos flexibles en el eje transversal.</p>
+
+<ul>
+ <li>Por defecto, el valor es <code>stretch</code>, que ensancha todos los elementos flexibles para rellenar el elemento primario en la dirección del eje transversal. Si el elemento padre no tiene un ancho fijo en la dirección del eje transversal, todos los elementos flexibles son tan largos como los elementos flexibles más largos. Así es como nuestro primer ejemplo obtuvo columnas de igual altura por defecto.</li>
+ <li>El valor <code>center</code> que utilizamos en nuestro código anterior mantiene las dimensiones intrínsecas de los elementos pero los centra sobre el eje transversal. Es por eso que los botones de nuestro ejemplo ahora están centrados verticalmente.</li>
+ <li>También puedes tener valores como <code>flex-start</code> y <code>flex-end</code>, que alinean todos los elementos al inicio y al final del eje transversal, respectivamente. Consulta {{cssxref ("align-items")}} para conocer todos los detalles al respecto.</li>
+</ul>
+
+<p>Puedes anular el comportamiento {{cssxref ("align-items")}} para elementos flexibles individuales aplicándoles la propiedad {{cssxref ("align-self")}}. Por ejemplo, añade a tu CSS lo siguiente:</p>
+
+<pre class="brush: css notranslate">button:first-child {
+  align-self: flex-end;
+}</pre>
+
+<p>Observa qué efecto tiene esto y retíralo de nuevo al terminar.</p>
+
+<p>{{cssxref ("justify-content")}} controla dónde se ubican los elementos flexibles sobre el eje principal.</p>
+
+<ul>
+ <li>El valor por defecto es <code>flex-start</code>, que asienta todos los elementos al comienzo del eje principal.</li>
+ <li>Puedes usar <code>flex-end</code> para que se asienten al final.</li>
+ <li><code>center</code> también es un valor de <code>justify-content</code> (para alinear contenido), que asienta los elementos flexibles sobre el centro del eje principal.</li>
+ <li>El valor <code>space-around</code> que hemos usado antes es útil porque distribuye todos los elementos de manera uniforme sobre el eje principal y deja un poco de espacio en cada extremo.</li>
+ <li>Hay otro valor, <code>space-between</code>, que es muy similar a <code>space-around</code>, pero no deja espacio en los extremos.</li>
+</ul>
+
+<p>Te animamos a jugar con estos valores para ver cómo funcionan antes de continuar.</p>
+
+<h2 id="Ordenar_los_elementos_flexibles">Ordenar los elementos flexibles</h2>
+
+<p>Los elementos flexbox también tienen una función para cambiar el orden de disposición de los elementos flexibles, sin que ello afecte a su orden en el código fuente. Esto es algo que resulta imposible de hacer con los métodos de compaginación tradicionales.</p>
+
+<p>El código para esto es simple: añade el siguiente CSS al código de ejemplo de la barra de controles:</p>
+
+<pre class="brush: css notranslate">button:first-child {
+  order: 1;
+}</pre>
+
+<p>Actualiza, y observa que el botón «Smile» se ha movido al final del eje principal. Observemos cómo funciona esto con un poco más de detalle:</p>
+
+<ul>
+ <li>Por defecto, todos los elementos flexibles tienen un valor {{cssxref ("order")}} de 0.</li>
+ <li>Los elementos flexibles que tengan establecidos los valores de orden más altos aparecerán más tarde en el orden de visualización que los elementos que tengan valores de orden más bajos.</li>
+ <li>Los artículos flexibles con el mismo valor de orden aparecerán en su orden de origen. Luego, si hay cuatro elementos cuyos valores de orden se han establecido en 2, 1, 1 y 0, respectivamente, su orden de visualización será 4°, 2°, 3° y, por último, 1°.</li>
+ <li>El tercer elemento aparece después del segundo porque tiene el mismo valor de orden y está después de él en el orden del código de origen.</li>
+</ul>
+
+<p>Puedes establecer valores de orden negativos para que los elementos aparezcan antes que los elementos establecidos con el valor 0. Por ejemplo, puedes hacer que el botón «Blush» aparezca al comienzo del eje principal utilizando la regla siguiente:</p>
+
+<pre class="brush: css notranslate">button:last-child {
+  order: -1;
+}</pre>
+
+<h2 id="Cajas_flexibles_anidadas">Cajas flexibles anidadas</h2>
+
+<p>Los elementos flexbox permiten crear algunos diseños de página bastante complejos. Es perfectamente aceptable configurar un elemento flexible para que también sea un contenedor flexible, de modo que los elementos secundarios también se dispongan como cajas flexibles. Echa un vistazo a complex-flexbox.html (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">consúltalo en vivo</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>El HTML para ello es bastante simple. Hay un elemento {{htmlelement ("section")}} que contiene tres elementos {{htmlelement ("article")}}. El tercer elemento {{htmlelement ("article")}} contiene tres elementos {{htmlelement ("div")}}:</p>
+
+<pre class="notranslate">section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button</pre>
+
+<p>Veamos el código que hemos usado para esta compaginación.</p>
+
+<p>En primer lugar, configuramos los elementos secundarios de {{htmlelement ("section")}} para que se presenten como cajas flexibles.</p>
+
+<pre class="brush: css notranslate">section {
+  display: flex;
+}</pre>
+
+<p>A continuación, establecemos algunos valores flexibles en los elementos {{htmlelement ("article")}}. Presta una atención especial a la segunda regla: configuramos el tercer elemento {{htmlelement ("article")}} para que sus hijos también se presenten como elementos flexibles, pero esta vez los disponemos en una 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ón, seleccionamos el primer elemento {{htmlelement ("div")}}. Primero usamos <code>flex:1 100px;</code> para darle una altura mínima efectiva de 100 px, luego configuramos sus elementos secundarios (los elementos {{htmlelement ("button")}}) para que también se presenten como elementos flexibles. Aquí los colocamos en una fila que los delimita y los alineamos en el centro del espacio disponible, como hicimos en el ejemplo del botón individual que vimos antes.</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>Por último, establecemos un tamaño para el botón, pero lo más interesante es que le damos un valor flexible de 1 auto. Esto tiene un efecto muy interesante, que puedes observar si cambias el tamaño del ancho de la ventana de tu navegador. Los botones ocuparán tanto espacio como puedan y se asentarán tantos en la misma línea como quepan, pero cuando ya no quepan con comodidad en la misma línea, saltarán de línea y crearán líneas nuevas.</p>
+
+<pre class="brush: css notranslate">button {
+  flex: 1 auto;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}</pre>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>La compatibilidad de los elementos flexbox está garantizada para la mayoría de los navegadores nuevos: Firefox, Chrome, Opera, Microsoft Edge e Internet Explorer 11, las versiones más recientes de Android/iOS, etc. Sin embargo, todavía hay navegadores antiguos en uso que no admiten las propiedades flexbox (o lo hacen, pero admiten una versión muy antigua y desactualizada).</p>
+
+<p>Esto no importa demasiado mientras estás aprendiendo y experimentando; pero cuando consideras usar propiedades flexbox en un sitio web real, debes hacer pruebas y asegurarte de que tu experiencia de usuario sea lo suficientemente aceptable en tantos navegadores como sea posible.</p>
+
+<p>Las propiedades flexbox son un poco más complicadas que otras características de CSS. Por ejemplo, si un navegador no soporta sombras en CSS, es probable que el sitio todavía sea utilizable. Sin embargo, si no es compatible con las funciones flexbox, probablemente el diseño completo se romperá, y el sitio web se inutilizará.</p>
+
+<p>Expusimos estrategias para superar problemas de compatibilidad entre navegadores en nuestro módulo <a href="/es/docs/Learn/Herramientas_y_pruebas/Cross_browser_testing">Pruebas de compatibilidad del navegador</a>.</p>
+
+<h2 id="Pon_a_prueba_tus_habilidades">Pon a prueba tus habilidades</h2>
+
+<p>Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para comprobar si retienes esta información antes de seguir en <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Con esto concluye nuestro recorrido por los conceptos básicos de las propiedades flexbox. Esperamos que te hayas divertido y que juegues con ello mientras avanzas en tu aprendizaje. A continuación, veremos otro aspecto importante de los diseños CSS: las rejillas CSS.</p>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<div>
+<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">Flotadores</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 varias 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 medios</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 en 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>
+</div>
diff --git a/files/es/learn/css/css_layout/floats/index.html b/files/es/learn/css/css_layout/floats/index.html
new file mode 100644
index 0000000000..47ae275f2e
--- /dev/null
+++ b/files/es/learn/css/css_layout/floats/index.html
@@ -0,0 +1,505 @@
+---
+title: Floats
+slug: Learn/CSS/CSS_layout/Floats
+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>Originalmente pensada para flotar imágenes dentro de bloques de texto, la propiedad {{cssxref("float")}} se convirtió en una de las herramientas más usadas para crear diseños multicolumna en las páginas web. Con la llegada de Flexbox y Grid ha vuelto ahora a su propósito original, como se explica en este artículo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos previos:</th>
+   <td>HTML básico (ver <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>), y una idea de Cómo funciona CSS (ver <a href="/es/docs/Learn/CSS/First_steps">Introducción a CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a crear elementos flotantes en páginas web, y a usar la propiedad <em>clear</em> y otros métodos para limpiar los elementos flotantes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="La_historia_de_los_elementos_flotantes">La historia de los elementos flotantes</h2>
+
+<p>La propiedad {{cssxref("float")}} fue introducida para permitir a los desarrolladores implementar diseños sencillos que incluyeran una imagen flotando dentro de una columna de texto, con el texto envolviendo la parte izquierda o derecha de la imagen. El tipo de cosa que encuentras habitualmente en el diseño de un periódico.</p>
+
+<p>Pero los desarrolladores web pronto se dieron cuenta de que podían flotar cualquier cosa, no solo imágenes, por lo que su uso se extendió, por ejemplo creando efectos de diseño divertidos como estas <a href="https://css-tricks.com/snippets/css/drop-caps/">letras capitulares</a>.</p>
+
+<p>Los elementos flotantes han sido usados comúnmente para crear diseños web completos con múltiples columnas situadas unas al lado de las otras (el comportamiento por defecto sería que las columnas se situaran unas debajo de las otras, en el mismo orden en el que aparecen en el código fuente). Ahora hay disponibles técnicas más modernas y mejores, que exploraremos más adelante en este módulo, por lo que el uso de {{cssxref("float")}} de este modo debería contemplarse como una <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">técnica anticuada</a>.</p>
+
+<p>En este artículo nos centraremos en el uso apropiado de la propiedad {{cssxref("float")}}.</p>
+
+<h2 id="Un_ejemplo_de_float_simple">Un ejemplo de float simple</h2>
+
+<p>Exploremos cómo usar los <em>float</em>. Empezaremos con un ejemplo realmente simple que incluye un bloque de texto flotando alrededor de un elemento. Puedes acompañarnos creando un fichero <code>index.html</code> en tu ordenador, rellenándolo con <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">una plantilla HTML simple</a>, e insertando el código siguiente en los lugares adecuados. Al final de la sección podrás ver un ejemplo en vivo de cómo debería ser el código final.</p>
+
+<p>Primero, empecemos con algo de HTML simple — añade lo siguiente al cuerpo de tu HTML, eliminando cualquier otra cosa que hubiera antes:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Ejemplo simple de caja flotante&lt;/h1&gt;
+
+&lt;div class="box"&gt;Caja flotante&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>Ahora aplica el siguiente CSS a tu HTML (usando un elemento {{htmlelement("style")}} o un {{htmlelement("link")}} para separar el fichero <code>.css</code>  — tú eliges):</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 guardas y recargas la página, verás algo parecido a lo que esperarías: la caja se encuentra por encima del texto, en un flujo normal. Para flotar el texto alrededor, añade las propiedades {{cssxref("float")}} y {{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>Ahora, si guardas y recargas, podrás ver algo parecido a lo siguiente:</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;Ejemplo simple de caja flotante&lt;/h1&gt;
+
+&lt;div class="box"&gt;Caja flotante&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>Analicemos ahora cómo funciona el <em>float</em> — el elemento con el <em>float</em> aplicado (el elemento {{htmlelement("div")}} en este caso) es sacado del flujo normal del documento y está pegado al lado izquierdo de su elemento contenedor padre ({{htmlelement("body")}}, en este caso). Cualquier contenido que esté por debajo del elemento flotado en el flujo normal, ahora lo envolverá, rellenando el espacio a la derecha hasta la parte superior del elemento flotante. Allí se detendrá.</p>
+
+<p>Flotar el contenido a la derecha tiene exactamente el mismo efecto, pero a la inversa — el elemento flotado se pegará a la derecha, y el contenido lo envolverá por la izquierda. Prueba cambiando el valor de la propiedad <em>float</em> a <code>right</code> y reemplaza {{cssxref("margin-right")}} con {{cssxref("margin-left")}} en el último conjunto de reglas para ver el resultado.</p>
+
+<p>Si bien podemos agregar un margen al flotante para alejar el texto, no podemos agregar un margen al texto para alejarlo del flotante. Esto se debe a que un elemento flotante se saca del flujo normal y las cajas de los siguientes elementos siguen detrás del flotador. Puedes comprobarlo haciendo algunos cambios en tu ejemplo.</p>
+
+<p>Añade una clase <code>special</code> al primer párrafo de texto, el que sucede inmediatamente a la caja flotante, y luego añade en tu CSS las siguientes reglas. Esto le dará al párrafo siguiente un color de fondo.</p>
+
+<pre class="brush: css notranslate">.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+</pre>
+
+<p>Para que el efecto sea más fácil de ver, cambia el <code>margin-right</code> de tu elemento flotante a <code>margin</code>, para obtener espacio alrededor del elemento flotante. Verás que el fondo del párrafo pasa justo por debajo de la caja flotante, como en el ejemplo 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;Ejemplo simple de caja flotante&lt;/h1&gt;
+
+&lt;div class="box"&gt;Caja flotante&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>Los cuadros de línea de nuestro siguiente elemento se han acortado para que el texto discurra alrededor del flotador, pero debido a que el flotador se eliminó del flujo normal, el cuadro alrededor del párrafo aún permanece en ancho completo.</p>
+
+<h2 id="Limpiando_floats">Limpiando floats</h2>
+
+<p>Hemos visto que el flotador se elimina del flujo normal y que otros elementos se mostrarán a su lado, por lo tanto, si queremos evitar que un elemento siguiente se mueva hacia arriba, debemos limpiar el <em>float</em>. Esto se logra con la propiedad {{cssxref ("clear")}}.</p>
+
+<p>En el HTML del ejemplo anterior, añade una clase <code>cleared</code> al segundo párrafo debajo del elemento flotante. Luego añade lo siguiente a tu 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;Ejemplo simple de caja flotante&lt;/h1&gt;
+
+&lt;div class="box"&gt;Caja flotante&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>Deberías ver que el siguiente párrafo limpia el elemento flotante y ya no aparece junto a él. La propiedad <code>clear</code> acepta los siguientes valores:</p>
+
+<ul>
+ <li><code>left</code>: limpia los elementos flotados a la izquierda.</li>
+ <li><code>right</code>: limpia los elementos flotados a la derecha.</li>
+ <li><code>both</code>: limpia cualquier elemento flotado, a la izquierda o a la derecha.</li>
+</ul>
+
+<h2 id="Limpiar_las_cajas_envueltas_alrededor_de_un_float">Limpiar las cajas envueltas alrededor de un float</h2>
+
+<p>Ahora ya sabes cómo limpiar un elemento que sigue a un elemento flotante, pero observa lo que sucede si tienes un flotante alto y un párrafo corto, con una caja envolviendo a ambos elementos. Modifica tu documento para que el primer párrafo y el cuadro flotante estén envueltos por un {{htmlelement("div")}} con una clase <code>wrapper</code>.</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Caja flotante&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>En tu CSS, añade la siguiente regla para la clase <code>.wrapper</code> y después recarga la página:</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}</pre>
+
+<p>Además, elimina la clase <code>.cleared</code> anterior:</p>
+
+<pre class="comment-text  notranslate" id="ct-0">.cleared {
+    clear: left;
+}</pre>
+
+<p>Verás que, como en el ejemplo en el que hemos puesto un color de fondo al párrafo, el color de fondo pasa por detrás del elemento flotante.</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;Ejemplo simple de caja flotante&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Caja flotante&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>Una vez más, esto se debe a que el flotador se ha sacado del flujo normal. Limpiar el siguiente elemento no ayuda con este problema de limpieza de caja, donde queremos que la parte inferior de la caja envuelva el elemento flotante y envuelva el contenido incluso si el contenido es más corto. Hay tres formas posibles de lidiar con esto, dos que funcionan en todos los navegadores, pero tienen algo de truco, y una tercera, nueva forma de lidiar con esta situación correctamente.</p>
+
+<h3 id="El_hack_clearfix">El hack clearfix</h3>
+
+<p>La forma en que esta situación se ha tratado tradicionalmente es utilizando algo conocido como "truco clearfix". Esto implica insertar algún contenido generado después del cuadro que contiene el contenido flotante y envolvente, y configurarlo para limpiar ambos.</p>
+
+<p>Añade el siguiente CSS al ejemplo:</p>
+
+<pre class="brush: css notranslate">.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}</pre>
+
+<p>Ahora recarga la página y la caja debería limpiarse. Esto es básicamente lo missmo que si hubieras añadido un elemento HTML como un <code>&lt;div&gt;</code> debajo de los elementos y le hubieras añadido la propiedad <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;Ejemplo simple de caja flotante&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Caja flotante&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="Usando_overflow">Usando overflow</h3>
+
+<p>Un método alternativo es establecer la propiedad {{cssxref("overflow")}} del elemento envolvente con un valor distinto de <code>visible</code>.</p>
+
+<p>Elimina el CSS clearfix que añadiste en la anterior sección y, en su lugar, añade <code>overflow: auto</code> a las reglas de la caja envolvente. De nuevo, la caja debería limpiarse.</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;Ejemplo simple de caja flotante&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Caja flotante&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>Este ejemplo funciona creando lo que se conoce como un <em><strong>block formatting context</strong></em> (BFC) o contexto de formato de bloque. Es como un pequeño diseño dentro de nuestra página dentro del cual todo está contenido, por lo tanto, nuestro elemento flotante está contenido dentro del BFC y el fondo se encuentra detrás de ambos elementos. Esto generalmente funcionará, sin embargo, en ciertos casos, es posible que encuentre barras de desplazamiento no deseadas o sombras recortadas debido a las consecuencias no deseadas del uso del desbordamiento..</p>
+
+<h3 id="display_flow-root">display: flow-root</h3>
+
+<p>La manera moderna de resolver este problema es usar el valor <code>flow-root</code> de la propiedad <code>display</code>. Esto existe solo para crear un BFC sin usar hacks; no habrá consecuencias no deseadas cuando lo use. Elimina <code>overflow: auto</code> de la regla <code>.wrapper</code> y añade <code>display: flow-root</code>. Asumiendo que tu <a href="/en-US/docs/Web/CSS/display#Browser_compatibility">navegador sea compatible</a>, la caja se limpiará.</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;Ejemplo simple de caja flotante&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Caja flotante&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="Resumen">Resumen</h2>
+
+<p>Ahora ya sabes todo lo que tienes que saber sobre los flotadores en el desarrollo web moderno. Consulta el artículo sobre <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">métodos de diseño anticuados</a> para obtener información de cómo se solían usar, lo que puede serte útil si tienes que trabajar en proyectos antiguos.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "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">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/es/learn/css/css_layout/flujo_normal/index.html b/files/es/learn/css/css_layout/flujo_normal/index.html
new file mode 100644
index 0000000000..ffc873938f
--- /dev/null
+++ b/files/es/learn/css/css_layout/flujo_normal/index.html
@@ -0,0 +1,95 @@
+---
+title: Flujo normal
+slug: Learn/CSS/CSS_layout/Flujo_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">Este artículo explica el flujo normal, o la forma en que se presentan los elementos de la página web si no cambias su compaginación.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Conocer cómo los navegadores presentan de forma predeterminada las páginas web antes de comenzar a hacer cambios.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Como se detalla en el último artículo de introducción al diseño, los elementos en una página web se distribuyen según el flujo normal si no se aplica ningún CSS que cambie la forma en la que se comportan. Y, como comenzamos a descubrir, puedes cambiar el comportamiento de los elementos, ya sea ajustando su posición en este flujo normal o eliminándolos de este por completo. Comenzar con un documento coherente y bien estructurado que sea legible en el flujo normal es la mejor manera de comenzar cualquier página web. Asegura que tu contenido sea legible, incluso si el usuario usa un navegador muy limitado o un dispositivo como un lector de pantalla que lee el contenido de la página. Además, como el flujo normal está diseñado para que un documento sea legible, al comenzar de esta manera, trabajas en el documento en lugar de luchar contra él a medida que haces cambios en su diseño.</p>
+
+<p>Antes de profundizar en los diferentes métodos de diseño, vale la pena revisar algunas de las cosas que ya debes haber estudiado en artículos anteriores con respecto al flujo normal de los documentos.</p>
+
+<h2 id="¿Cómo_se_presentan_por_defecto_los_elementos">¿Cómo se presentan por defecto los elementos?</h2>
+
+<p>En primer lugar, se toma de las cajas de cada uno de los elementos el contenido, luego se añade cualquier área de relleno, borde y margen alrededor de ellas; es el modelo de cajas que hemos visto antes.</p>
+
+<p>De manera predeterminada, el contenido de un <a href="/es/docs/Web/HTML/Block-level_elements">elemento de nivel de bloque</a> es el 100% del ancho de su elemento padre y su altura viene determinada por su contenido. Los <a href="/es/docs/Web/HTML/Elementos_en_línea">elementos en línea</a> tienen su altura y anchura determinados por su contenido. No puedes establecer el ancho o la altura de los elementos en línea, simplemente se ubican dentro del contenido de los elementos de nivel de bloque. Si deseas controlar el tamaño de un elemento en línea de esta manera, debes configurarlo para que se comporte como un elemento de nivel de bloque con <code>display: block;</code> (o incluso, <code>display: inline-block;</code>, que combina características de ambos).</p>
+
+<p>Esto explica los elementos individuales, pero ¿qué hay del modo como los elementos interactúan entre sí? El flujo de diseño normal (mencionado en el artículo de introducción al diseño) es el sistema mediante el cual los elementos se colocan en la ventana gráfica del navegador. De manera predeterminada, los elementos de nivel de bloque se presentan en la <em>dirección del flujo del bloque</em>, en función del <a href="/es/docs/Web/CSS/writing-mode">modo de escritura</a> de los padres (<em>initial</em>: horizontal-tb): cada uno aparecerá en una línea nueva debajo de la última, y estarán separados por cualquier margen que se establezca en ellos. Por lo tanto, en inglés, o en cualquier otro modo de escritura horizontal y de arriba a abajo, los elementos de nivel de bloque se disponen verticalmente.</p>
+
+<p>Los elementos en línea se comportan de manera diferente: no aparecen en líneas nuevas; en su lugar, se asientan en la misma línea entre sí y con cualquier contenido de texto adyacente (o envuelto), siempre que tengan espacio dentro del ancho del elemento de nivel de bloque primario. Si no hay espacio, el texto o los elementos que desborden bajarán a la línea siguiente.</p>
+
+<p>Si dos elementos adyacentes tienen algún margen configurado y los dos márgenes se tocan, se mantiene el mayor de los dos y el menor desaparece; esto se llama colapso del margen, y ya lo hemos visto antes.</p>
+
+<p>Echemos un vistazo a un ejemplo sencillo que explica todo esto:</p>
+
+<div id="Normal_Flow">
+<pre class="brush: html">&lt;h1&gt;Flujo de los documentos básicos&lt;/h1&gt;
+
+&lt;p&gt;Soy un elemento básico de nivel de bloque. Mis elementos de nivel de bloque adyacentes se encuentran en líneas nuevas debajo de mí.&lt;/p&gt;
+
+&lt;p&gt;Cubrimos por defecto el 100% del ancho de nuestro elemento principal, y somos tan altos como nuestro contenido secundario. Nuestro ancho y alto total es nuestro contenido + área de relleno + ancho/alto del borde.&lt;/p&gt;
+
+&lt;p&gt;Estamos separados por nuestros márgenes. Debido al colapso del margen, estamos separados por el ancho de uno de nuestros márgenes, no por ambos.&lt;/p&gt;
+
+&lt;p&gt;Los elementos en línea &lt;span&gt;como este&lt;/span&gt; y &lt;span&gt;este otro&lt;/span&gt; se ubican en la misma y la de los nodos de texto adyacentes, mientras hay espacio en la misma línea. Si un elemento en línea desborda, &lt;span&gt;sigue por la línea siguiente, si es posible (como la que contiene este texto)&lt;/span&gt;, o simplemente pasa a una línea nueva, como hace esta imagen: &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="Resumen">Resumen</h2>
+
+<p>Ahora que comprendes el flujo normal y cómo el navegador presenta las cosas por defecto, continúa para comprender cómo cambiar esta pantalla predeterminada para crear el diseño que necesitas.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "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">El 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 heredada</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad con los navegadores antiguos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de de elementos básicos de compaginación </a></li>
+</ul>
diff --git a/files/es/learn/css/css_layout/grids/index.html b/files/es/learn/css/css_layout/grids/index.html
new file mode 100644
index 0000000000..d2632cba2b
--- /dev/null
+++ b/files/es/learn/css/css_layout/grids/index.html
@@ -0,0 +1,696 @@
+---
+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>
diff --git a/files/es/learn/css/css_layout/index.html b/files/es/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..afa1b0f9a0
--- /dev/null
+++ b/files/es/learn/css/css_layout/index.html
@@ -0,0 +1,87 @@
+---
+title: Diseño CSS
+slug: Learn/CSS/CSS_layout
+tags:
+  - Aprender
+  - CSS
+  - Floating
+  - Grids
+  - Guía
+  - Landing
+  - Layout
+  - Module
+  - Multiple column
+  - Positioning
+  - Principiante
+  - TopicStub
+  - flexbox
+  - float
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{draft}}</div>
+
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Llegados a este punto, hemos examinado los fundamentos básicos de CSS: cómo dar estilo al texto y cómo manipular las cajas que incluyen tu contenido. Llegó el momento de explorar cómo colocar tus cajas en el lugar que elijas con respecto a la ventana principal y el resto de cajas. Hemos cubierto ya los prerrequisitos necesarios, así que vamos a sumergirnos en la maquetación CSS, fijándonos en diferentes configuraciones de visualización, métodos de maquetación tradicionales que implican <em>floats </em>y posicionamiento, así como a nuevas herramientas de maquetación en voga, como <em>flexbox</em>.</p>
+
+<h2 id="Prerrequisitos">Prerrequisitos</h2>
+
+<p>Antes de comenzar este módulo, ya deberías:</p>
+
+<ol>
+ <li>Estar familiarizado con HTML, como se expone en el módulo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</li>
+ <li>Sentirte cómodo con los fundamentos de CSS, que se discuten en   <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li>
+ <li>Entender como diseñar cajas <a href="/en-US/docs/Learn/CSS/Styling_boxes">style boxes</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Si estás trabajando en un dispositivo donde no tengas la posibilidad de crear tus propios archivos, puedes probar la mayoría de los ejemplos de código en un programa online como <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<p>Estos artículos te proporcionarán instrucciones sobre las herramientas y técnicas básicas de maquetación disponibles en CSS.</p>
+
+<dl>
+ <dt><a href="/es/docs/Learn/CSS/CSS_layout/Introduction">Introducción a la maquetación CSS</a></dt>
+ <dd>En este artículo repasaremos algunas de las características de la maquetación con CSS que ya hemos tratado en módulos previos, como los diferentes valores de {{cssxref("display")}} ; e introduciremos algunos de los conceptos que estudiaremos a lo largo del módulo.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Flujo_normal">Normal flow</a></dt>
+ <dd>Los elementos en las páginas web se presentan de acuerdo con el <em>flujo normal, </em>hasta que hacemos algo que cambie eso. Este artículo explica las bases del flujo normal para aprender como cambiarlo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
+ <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a>  es una muy reciente tecnología que, soportada ya por numerosos navegadores, está lista para su uso generalizado. Flexbox proporciona las herramientas necesarias para crear rápidamente maquetaciones flexibles y complejas, así como otras funcionalidades que tradicionalmente eran de difícil implementación con CSS. Este artículo explica su funcionamiento básico.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt>
+ <dd>Los sistemas de cuadrícula son otra funcionalidad muy utilizada para la maquetación CSS, que tiende a ser implementada mediante <em>floats</em> u otras funciones de maquetación. Visualizas tu maquetación como un número fijo de columnas donde vas incluyendo tu contenido. En este artículo exploraremos la idea básica detrás de un sistema de cuadrícula, y terminaremos experimentando con CSS Grid, una incipiente nueva característica que permite diseñar una cuadricula Web con gran facilidad</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt>
+ <dd>Inicialmente utilizado para imágenes flotantes dentro de bloques de texto, la propiedad {{cssxref("float")}} se ha convertido en una de las herramientas más utilizadas para crear maquetaciones de varias columnas en páginas web. Con la venida de Flexbox y Grid se ha regresado a su propósito original, como lo explica este artículo.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></dt>
+ <dd>El posicionamiento te permite sacar elementos del flujo normal de maquetación del documento para hacer que se comporten de manera diferente, p.ej: colocando unos encima de otros, o fijándolos a un lugar de la ventana principal. Este artículo explica los diferentes valores para  {{cssxref("position")}} y cómo utilizarlos.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Ejemplos prácticos de posicionamiento</a></dt>
+ <dd>Una vez cubiertas las nociones básicas de posicionamiento en el artículo anterior, vamos ahora a construir un par de ejemplos reales, para explicar las cosas que puedes hacer con el posicionamiento.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño Multi-columna</a></dt>
+ <dd>El diseño multi-columna te proporciona un método de maquetación de contenido en columnas, como lo podrías ver en un periódico. Este artículo explica como usar esta característica.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Diseño_receptivo">Responsive design</a></dt>
+ <dd>A medida que han aparecido diversos tamaños de pantalla en dispositivos habilitados para la web, apareció un conjunto de practicas que permiten a las páginas web alterar su diseño y apariencia para adaptarse a diferentes anchos de pantalla, resoluciones, etc.Este se conoce como Responsive design (RWD) y es una idea que cambió la forma en que diseñamos páginas web multi-dispositivos, y en este artículo te ayudaremos a entender las principales técnicas que necesitas saber para dominarlo.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía de consulta de medios para principiantes</a></dt>
+ <dd><strong>CSS Media Query </strong>te proporciona una forma de aplicar CSS solo cuando el entorno del navegador y el dispositivo coincide con las reglas que especificaste, por ejemplo "la ventana principal es más ancha de 480 pixels". Las consultas de medios son una parte clave del responsive web design, ya que te permiten crear diferentes diseños dependiendo del tamaño de la ventana principal, así como también puede ser usado para detectar otras cosas acerca del entorno en donde tu página web se está ejecutando, por ejemplo si el usuario está usando una pantalla táctil en lugar de un ratón. En esta guía, aprenderás primero acerca de la sintaxis usada en las consultas de medios, y luego pasar a usarlos en un ejemplo donde se muestra cómo un diseño simple puede hacerse responsive.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de diseño heredados</a></dt>
+ <dd>Los sistemas Grid son una característica muy común usada en el diseño CSS, y antes del diseño Grid CSS, tendían a ser implementados usando floats u otras características de diseño. Imagina tu diseño como un conjunto de números de columnas (p.ej. 4, 5 o 12), y luego acomoda tus columnas de contenido dentro de esas columnas imaginarias. En este artículo vamos a explorar cómo funcionan estos métodos para que entiendas como eran usados si trabajas en un proyecto más antiguo. </dd>
+ <dt><a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Soporte_a_navegadores_antiguos">Soporte a navegadores antiguos</a></dt>
+ <dd>En este modulo recomendamos usar Flexbox y Grid como principal método de diseño. Siempre habrán personas que visiten tu página web desde navegadores antiguos, o navegadores que no soportan los métodos que usaste. Este siempre ha sido el caso en la web: a medida que se desarrollan nuevas características, los distintos navegadores priorizan diferentes cosas. Este artículo explica como usar técnicas modernas para la web sin dejar por fuera a los usuarios de tecnologías antiguas. </dd>
+</dl>
+
+<h2 id="Ejercicios">Ejercicios</h2>
+
+<p>Los siguientes ejercicios comprobarán tu habilidad para maquetar páginas web con CSS.</p>
+
+<dl>
+ <dt>Creando una maquetación de varias columnas flexibles</dt>
+ <dd>Este ejercicio comprobará tu habilidad par crear una maquetación multi-columna, con alguna que otra característica interesante.</dd>
+ <dt>Creando un <em>widget</em> fijo de control</dt>
+ <dd>Este ejercicio pone a prueba tu entendimiento sobre el posicionamiento, proponiéndote crear un <em>widget</em> de control con posición fija, que permitirá al usuario acceder a los controles de una aplicación Web, independientemente de dónde se hubiera desplazado en la página.</dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Learn/CSS/Basics/Layout">https://developer.mozilla.org/en-US/Learn/CSS/Basics/Layout</a></li>
+</ul>
diff --git a/files/es/learn/css/css_layout/introducción/index.html b/files/es/learn/css/css_layout/introducción/index.html
new file mode 100644
index 0000000000..2f409d97c3
--- /dev/null
+++ b/files/es/learn/css/css_layout/introducción/index.html
@@ -0,0 +1,701 @@
+---
+title: Introducción al diseño en CSS
+slug: Learn/CSS/CSS_layout/Introducción
+translation_of: Learn/CSS/CSS_layout/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">Este artículo resumirá algunas de las características de diseño de páginas web con CSS que ya hemos mencionado en módulos anteriores, como los diferentes valores de {{cssxref ("display")}}, e introducirá algunos de los conceptos que vamos a tratar en este módulo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Proporcionar una visión general de las técnicas de diseño de páginas web con CSS. Cada técnica se puede aprender con mayor detalle en tutoriales posteriores.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Las técnicas de diseño de páginas web con CSS nos permiten controlar dónde se ubican los elementos que están contenidos en una página web en relación con su posición predeterminada en el flujo de diseño normal, así como el resto de elementos a su alrededor, su contenedor principal o la vista/ventana principal. Las técnicas de diseño de páginas web que trataremos con más detalle en este módulo son:</p>
+
+<ul>
+ <li>Flujo normal</li>
+ <li>La propiedad {{cssxref ("display")}}</li>
+ <li>Flexbox</li>
+ <li>Grid</li>
+ <li>Floats</li>
+ <li>Posicionamiento</li>
+ <li>Diseño de tablas</li>
+ <li>Diseño a varias columnas</li>
+</ul>
+
+<p>Cada técnica tiene sus usos, ventajas y desventajas, y ninguna técnica está diseñada para usarse de forma aislada. Si entiendes para qué se ha diseñado cada método, te será fácil comprender cuál es la mejor herramienta de diseño para cada tarea.</p>
+
+<h2 id="Flujo_normal">Flujo normal</h2>
+
+<p>El flujo normal es el modo como el navegador presenta las páginas HTML de forma predeterminada cuando no haces nada para controlar el diseño de página. Echemos un vistazo rápido a un ejemplo HTML:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Amo a mi gato.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Comprar comida para gatos&lt;/li&gt;
+  &lt;li&gt;Ejercicio&lt;/li&gt;
+  &lt;li&gt;Anímate amigo&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;¡Fin!&lt;/p&gt;</pre>
+
+<p>Por defecto, el navegador mostrará este código de la manera siguiente:</p>
+
+<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p>
+
+<p>Observa aquí cómo se muestra el HTML en el orden exacto en que aparece en el código fuente, con los elementos uno debajo del otro: el primer párrafo, seguido de la lista desordenada, y a continuación el segundo párrafo.</p>
+
+<p>Los elementos que aparecen uno debajo del otro se describen como <em>elementos de bloque</em>, en contraposición con los <em>elementos de línea</em>, que aparecen uno al lado del otro, como las palabras de un párrafo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: La dirección en la que se presentan los contenidos de un elemento de bloque se describe como dirección de los bloques. La dirección de los bloques va de arriba a abajo en un idioma como el español, cuyo modo de escritura es horizontal. Sería horizontal en cualquier idioma con un modo de escritura vertical, como el japonés. Correspondientemente, la dirección de línea es la dirección en la que los contenidos de línea (por ejemplo, una frase) se disponen.</p>
+</div>
+
+<p>Cuando usas CSS para crear un diseño de página web, alejas los elementos del flujo normal, pero para muchos de los elementos de tu página, el flujo normal proporciona exactamente el diseño que necesitas. Por esta razón resulta tan importante comenzar con un documento HTML bien estructurado, porque te permite trabajar ya con la forma en que las cosas se presentan por defecto, en lugar de tener que luchar contra ello.</p>
+
+<p>Los métodos que permiten cambiar la disposición de los elementos en CSS son los siguientes:</p>
+
+<ul>
+ <li><strong>La propiedad {{cssxref ("display")}}</strong>: los valores estándar como <code>block</code>, <code>inline</code> o <code>inline-block</code> pueden cambiar el comportamiento de los elementos en el flujo normal (consulta <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">Tipos de cajas en CSS</a> para obtener más información). Luego hay métodos de diseño completos que se activan con un valor <code>display</code>, por ejemplo <a href="/es/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> y <a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li>
+ <li><strong>Floats</strong>: la aplicación de un valor {{cssxref ("float")}} como <code>left</code> puede hacer que los elementos de nivel de bloque rodeen el elemento por uno de sus lados, como la forma en que las imágenes a veces tienen texto flotando a su alrededor en los diseños de algunas revistas.</li>
+ <li><strong>La propiedad {{cssxref ("position")}}</strong>: permite controlar con precisión la ubicación de las cajas dentro de otras cajas. El posicionamiento estático es el valor predeterminado en el flujo normal, pero puede hacer que los elementos se distribuyan de manera diferente si se utilizan otros valores, por ejemplo, pueden estar siempre fijados a la parte superior izquierda de la ventana del navegador.</li>
+ <li><strong>Diseño de tablas</strong>: se pueden usar las características que sirven para diseñar las partes de una tabla HTML en elementos que no son de tabla con <code>display: table</code> y las propiedades asociadas.</li>
+ <li><strong>Diseño en varias columnas</strong>: las propiedades de <a href="/es/docs/Web/CSS/Columnas_CSS">diseño en varias columnas</a> permiten distribuir el contenido de un bloque en columnas, como en el caso de un periódico.</li>
+</ul>
+
+<h2 id="La_propiedad_display">La propiedad display</h2>
+
+<p>Los métodos principales para lograr el diseño de páginas web con CSS son todos los valores de la propiedad <code>display</code>. Esta propiedad permite cambiar la forma predeterminada en que algo se muestra. Todo en flujo normal tiene un valor de <code>display</code>, utilizado como la forma como se comportan por defecto los elementos en los que están configurados. Por ejemplo, el hecho de que los párrafos en español se muestran uno debajo del otro se debe a que presentan la configuración <code>display: block</code>. Si creas un enlace alrededor de un texto dentro de un párrafo, ese enlace permanece en línea con el resto del texto y no se divide al pasar a una línea nueva. Esto se debe a que el elemento {{htmlelement ("a")}} es por defecto <code>display: inline</code>.</p>
+
+<p>Puedes cambiar este comportamiento predeterminado de visualización (<code>display</code>). Por ejemplo, el elemento {{htmlelement ("li")}} es <code>display: block</code> de forma predeterminada, lo que significa que los elementos de la lista se muestran uno debajo del otro en nuestro documento en español. Si cambiamos el valor de visualización a <code>inline</code>, ahora se muestran uno al lado del otro, como lo harían las palabras de una frase. El hecho de que puedas cambiar el valor de <code>display</code> de cualquier elemento significa que puedes elegir elementos HTML por su significado semántico, sin preocuparte por cómo se verán. La forma en que se ven es algo que puedes cambiar.</p>
+
+<p>Además de poder cambiar la presentación predeterminada de un elemento <code>block</code> a un elemento <code>inline</code> y viceversa, hay algunos métodos de diseño de página más poderosos que se inician como un valor de <code>display</code>. Sin embargo, cuando los uses, en general vas a necesitar propiedades adicionales. Los dos valores más importantes para nuestros propósitos cuando hablamos del diseño de páginas web son <code>display: flex</code> y <code>display: grid</code>.</p>
+
+<h2 id="Flexbox">Flexbox</h2>
+
+<p>Flexbox es el nombre corto del <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">módulo de diseño de cajas flexibles</a>, pensado para facilitarnos la distribución de las cosas en una dimensión, ya sea como una fila o como una columna. Para usar el método Flexbox, aplica <code>display: flex</code> al elemento padre de los elementos que deseas distribuir; todos sus elementos hijo directos se convierten en elementos flexibles. Vamos a verlo en un ejemplo sencillo.</p>
+
+<p>El marcado HTML siguiente nos proporciona un elemento contenedor con una clase <code>wrapper</code> dentro del cual hay tres elementos {{htmlelement ("div")}}. Por defecto, estos elementos se mostrarían como elementos de bloque, uno debajo del otro, en nuestro documento en español.</p>
+
+<p>Sin embargo, si añadimos <code>display: flex</code> al elemento padre, los tres elementos se organizan en columnas. Esto se debe a que se convierten en <em>elementos flexibles</em> y se ven afectados por algunos valores iniciales que el método Flexbox establece en el contenedor flexible. Se muestran en una fila porque el valor inicial de {{cssxref ("flex-direction")}} establecido en su elemento padre es <code>row</code>. Todos parecen expandirse hasta la altura del elemento de más altura, porque el valor inicial de la propiedad {{cssxref ("align-items")}} establecida en su elemento primario es <code>stretch</code>. Esto significa que los artículos se expanden hasta la altura del contenedor flexible, que en este caso está definida por el artículo de mayor altura. Todos los artículos se alinean al comienzo del contenedor y dejan el espacio que sobra al final de la fila.</p>
+
+<div id="Flex_1">
+<div class="hidden">
+<h6 id="Ejemplo_Flexbox_1">Ejemplo Flexbox 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;Uno&lt;/div&gt;
+  &lt;div class="box2"&gt;Dos&lt;/div&gt;
+  &lt;div class="box3"&gt;Tres&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p>
+
+<p>Además de las propiedades anteriores, que pueden aplicarse a contenedores flexibles, también hay propiedades que pueden aplicarse a los elementos flexibles. Estas propiedades, entre otras cosas, pueden cambiar el comportamiento de estos elementos flexibles y permitirles expandirse y contraerse para adaptarse al espacio disponible.</p>
+
+<p>Como un ejemplo sencillo de esto podemos añadir la propiedad {{cssxref ("flex")}} a todos nuestros elementos secundarios, con un valor de <code>1</code>. Esto hará que todos los elementos crezcan y llenen el contenedor, en lugar de dejar espacio al final. Si hay más espacio, los artículos se ensancharán; si hay menos espacio, se volverán más estrechos. Además, si añades al código otro elemento, todos los elementos se volverán más pequeños para dejarle espacio; ajustarán el tamaño para ocupar la misma cantidad de espacio, cualquiera que sea.</p>
+
+<div id="Flex_2">
+<div class="hidden">
+<h6 id="Ejemplo_Flexbox_2">Ejemplo Flexbox 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;Uno&lt;/div&gt;
+    &lt;div class="box2"&gt;Dos&lt;/div&gt;
+    &lt;div class="box3"&gt;Tres&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esta ha sido una breve introducción de lo que permite el método Flexbox. Para obtener más información, consulta nuestro artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p>
+</div>
+
+<h2 id="Diseño_de_cuadrícula">Diseño de cuadrícula</h2>
+
+<p>Mientras que el método Flexbox está pensado para distribuir elementos unidimensionalmente, el diseño de cuadrícula está diseñado para distribuir elementos en dos dimensiones: alinear elementos en filas y columnas.</p>
+
+<p>Una vez más, puedes activar el diseño de páginas web en cuadrícula con un valor de visualización específico: <code>display: grid</code>. El ejemplo siguiente utiliza un marcado similar al del ejemplo del método Flexbox, con un contenedor y algunos elementos secundarios. Además de usar <code>display: grid</code>, también definimos algunos tramos de filas y columnas en el elemento padre con las propiedades {{cssxref("grid-template-rows")}} y {{cssxref("grid-template-columns")}}. Hemos definido tres columnas, cada una de <code>1fr</code>, y dos filas de <code>100px</code>. No necesitamos poner ninguna regla sobre los elementos secundarios porque se colocan automáticamente en las celdas que nuestra cuadrícula ha creado.</p>
+
+<div id="Grid_1">
+<div class="hidden">
+<h6 id="Ejemplo_de_cuadrícula_1">Ejemplo de cuadrícula 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;Uno&lt;/div&gt;
+    &lt;div class="box2"&gt;Dos&lt;/div&gt;
+    &lt;div class="box3"&gt;Tres&lt;/div&gt;
+    &lt;div class="box4"&gt;Cuatro&lt;/div&gt;
+    &lt;div class="box5"&gt;Cinco&lt;/div&gt;
+    &lt;div class="box6"&gt;Seis&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p>
+
+<p>Cuando ya tienes una cuadrícula, se puede colocar tus elementos en ella explícitamente en lugar de confiar en el comportamiento de colocación automática que hemos visto arriba. En el segundo ejemplo, hemos definido la misma cuadrícula, pero esta vez con tres elementos secundarios. Hemos establecido la línea de inicio y final de cada elemento con las propiedades {{cssxref ("grid-column")}} y {{cssxref ("grid-row")}}. Esto hace que los elementos abarquen varios tramos.</p>
+
+<div id="Grid_2">
+<div class="hidden">
+<h6 id="Ejemplo_de_cuadrícula_2">Ejemplo de cuadrícula 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;Uno&lt;/div&gt;
+    &lt;div class="box2"&gt;Dos&lt;/div&gt;
+    &lt;div class="box3"&gt;Tres&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Estos dos ejemplos son solo una pequeña parte del poder del diseño de cuadrículas; para obtener más información, consulta nuestro artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Grids">Diseñar cuadrículas</a>.</p>
+</div>
+
+<p>El resto de esta guía expone otros métodos de diseño de páginas web que son menos importantes para las estructuras principales de diseño de tu página web, pero que pueden serte de ayuda para tareas específicas. Si entiendes la naturaleza de cada una de las tareas de diseño de una página web, vas a descubrir enseguida que a menudo vas a ser capaz de discernir qué tipo de diseño se adapta mejor a cada componente de tu diseño particular.</p>
+
+<h2 id="Floats">Floats</h2>
+
+<p>El método de flotación de un elemento cambia el comportamiento de ese elemento y de los elementos de nivel de bloque que lo siguen en el flujo normal. El elemento es desplazado hacia la izquierda o hacia la derecha y es eliminado del flujo normal, y el contenido circundante flota alrededor de este elemento.</p>
+
+<p>La propiedad {{cssxref ("float")}} tiene cuatro valores posibles:</p>
+
+<ul>
+ <li><code>left</code>: establece la flotación a la izquierda del elemento.</li>
+ <li><code>right</code>: establece la flotación a la derecha del elemento.</li>
+ <li><code>none</code>: especifica que no hay flotación en absoluto. Este es el valor predeterminado.</li>
+ <li><code>inherit</code>: especifica que el valor de la propiedad <code>float</code> debe heredarse del elemento padre.</li>
+</ul>
+
+<p>En el ejemplo siguiente, establecemos una flotación a la izquierda para un elemento <code>&lt;div&gt;</code> y le damos un {{cssxref ("margin")}} a la derecha para mantener el texto alejado del elemento. Esto nos da el efecto del texto envuelto alrededor de ese cuadro, y es la mayor parte de lo que necesitas saber sobre la flotación, tal como se utiliza en el diseño web moderno.</p>
+
+<div id="Float_1">
+<div class="hidden">
+<h6 id="Ejemplo_de_flotación">Ejemplo de flotación</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;Ejemplo sencillo de flotación&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="note">
+<p><strong>Nota</strong>: El método de flotación se explica al completo en nuestro artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Floats">las propiedades float y clear</a>. El método de flotación es el que se usaba para crear diseños de columnas antes de la aparición de técnicas como los métodos Flexbox y diseño en rejillas. En la red aún puedes toparte con estos métodos. Vamos a exponer todo esto en el artículo sobre <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">métodos de diseño heredados</a>.</p>
+</div>
+
+<h2 id="Técnicas_de_posicionamiento">Técnicas de posicionamiento</h2>
+
+<p>El posicionamiento permite mover un elemento desde donde se colocaría cuando está en flujo normal a otra ubicación. El posicionamiento no es un método para crear diseños de página principal, se trata más bien de administrar y ajustar la posición de elementos específicos en la página.</p>
+
+<p>Sin embargo, hay técnicas útiles para ciertos patrones de diseños de páginas web que se basan en la propiedad {{cssxref ("position")}}. Comprender el posicionamiento también ayuda a comprender el flujo normal y qué implica sacar un elemento del flujo normal.</p>
+
+<p>Hay cinco tipos de posicionamiento que debes conocer:</p>
+
+<ul>
+ <li>El <strong>posicionamiento estático</strong> es el valor por defecto que tiene establecido cada elemento, esto significa sencillamente «coloca el elemento en su posición normal en el flujo de diseño del documento, nada especial que ver aquí».</li>
+ <li>El <strong>posicionamiento relativo</strong> permite modificar la posición de un elemento en la página y moverlo con respecto a su posición en el flujo normal, lo que incluye superposiciones con otros elementos de la página.</li>
+ <li>El <strong>posicionamiento absoluto</strong> mueve un elemento completamente fuera del flujo de diseño normal de la página, como si estuviera asentado en una capa separada propia. A partir de aquí, puedes fijarlo en una posición relativa a los bordes del elemento <code>&lt;html&gt;</code> de la página (o su elemento padre más próximo). Esto es útil para crear efectos complejos de diseño de página, como cuadros con pestañas en que diferentes paneles de contenido se ubican uno encima del otro y se muestran y ocultan según se desee, o paneles de información que por defecto se asientan fuera de la pantalla, pero puedes hacer que se deslicen hacia la pantalla usando un control de tipo botón.</li>
+ <li>El <strong>posicionamiento fijo</strong> es muy similar al posicionamiento absoluto, excepto que corrige un elemento relativo a la ventana gráfica del navegador, no otro elemento. Esto es útil para crear efectos, como un menú de navegación persistente que siempre permanece en el mismo lugar en la pantalla al contrario que el contenido, que se desplaza.</li>
+ <li>El <strong>posicionamiento <em>sticky</em> (pegajoso)</strong> es un método de posicionamiento más reciente que hace que un elemento actúe como <code>position: static</code> hasta que alcanza un desplazamiento definido con respecto a la ventana gráfica, en cuyo punto actúa como un elemento con la propiedad <code>position: fixed</code>.</li>
+</ul>
+
+<h3 id="Ejemplo_sencillo_de_posicionamiento">Ejemplo sencillo de posicionamiento</h3>
+
+<p>Para familiarizarte con estas técnicas de diseño de página, te mostraremos un par de ejemplos rápidos. Todos nuestros ejemplos contarán con el mismo HTML, que es el siguiente:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posicionamiento&lt;/h1&gt;
+
+&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;
+&lt;p class="positioned"&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;
+&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;</pre>
+
+<p>Aplicaremos a este HTML un estilo predeterminado definido por el CSS siguiente:</p>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+
+<p>La salida que se obtiene es la siguiente:</p>
+
+<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p>
+
+<h3 id="El_posicionamiento_relativo">El posicionamiento relativo</h3>
+
+<p>El posicionamiento relativo permite compensar un elemento desde la posición por defecto que tendría en flujo normal. Esto significa que podrías hacer una tarea como mover un icono un poco hacia abajo para que se alinee con una etiqueta de texto. Para ello, podríamos añadir la regla de posicionamiento relativo siguiente:</p>
+
+<pre class="brush: css notranslate">.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>Aquí asignamos el valor <code>relative</code> a la propiedad {{cssxref ("position")}} de nuestro párrafo del medio: esto no hace nada por sí solo, así que también añadimos las propiedades {{cssxref ("top")}} y {{cssxref ( "left")}}, que sirven para mover el elemento afectado hacia abajo y a la derecha. Esto puede parecer lo contrario de lo que esperabas, pero debes pensar en ello como un elemento al que se empuja por sus lados superior e izquierdo, lo que resulta en un movimiento a la derecha y abajo.</p>
+
+<p>Añadir este código dará el resultado siguiente:</p>
+
+<div id="Relative_1">
+<div class="hidden">
+<h6 id="Ejemplo_de_posicionamiento_relativo">Ejemplo de posicionamiento relativo</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;El posicionamiento relativo&lt;/h1&gt;
+
+&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;
+&lt;p class="positioned"&gt;Este es mi elemento con posicionamiento relativo. &lt;/p&gt;
+&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p>
+
+<h3 id="El_posicionamiento_absoluto">El posicionamiento absoluto</h3>
+
+<p>El posicionamiento absoluto se utiliza para eliminar por completo un elemento del flujo normal y colocarlo mediante desplazamientos desde los bordes de un bloque contenedor.</p>
+
+<p>Volviendo a nuestro ejemplo original no posicionado, podríamos añadir la regla CSS siguiente para implementar el posicionamiento absoluto:</p>
+
+<pre class="brush: css notranslate">.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>Aquí le damos a la propiedad {{cssxref ("position")}} de nuestro párrafo del medio un valor de <code>absolute</code>, y le asignamos las mismas propiedades {{cssxref ("top")}} y {{cssxref ("left")}}. Sin embargo, ahora añadir este código da el resultado siguiente:</p>
+
+<div id="Absolute_1">
+<div class="hidden">
+<h6 id="Ejemplo_de_posicionamiento_absoluto">Ejemplo de posicionamiento absoluto</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posicionamiento absoluto&lt;/h1&gt;
+
+&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;
+&lt;p class="positioned"&gt;Este es mi elemento con posicionamiento absoluto. &lt;/p&gt;
+&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+    position: absolute;
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p>
+
+<p>¡Este resultado es muy diferente! El elemento posicionado ahora se ha separado por completo del resto del diseño de la página y se superpone encima de este. Los otros dos párrafos ahora se asientan juntos, como si su hermano con posicionamiento absoluto no existiera. Las propiedades {{cssxref ("top")}} y {{cssxref ("left")}} tienen un efecto diferente en elementos con posicionamiento absoluto que en elementos con posicionamiento relativo. En este caso, los desplazamientos se han calculado desde la parte superior e izquierda de la página. Es posible cambiar el elemento padre para que se convierta en este tipo de contenedor, y lo veremos en el artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Positioning">posicionamiento</a>.</p>
+
+<h3 id="Posicionamiento_fijo">Posicionamiento fijo</h3>
+
+<p>El posicionamiento fijo elimina nuestro elemento del flujo de documentos de la misma manera que el posicionamiento absoluto. Sin embargo, en lugar de contar los desplazamientos en relación con el contenedor, se cuentan con respecto a la ventana gráfica. Como el elemento permanece fijo en relación con la ventana gráfica, podemos crear efectos como un menú que permanece fijo mientras la página se desplaza por debajo de él.</p>
+
+<p>En este ejemplo nuestro HTML tiene tres párrafos de texto para poder tener una página que se desplace, y un cuadro al que asignamos la propiedad <code>position: fixed</code>.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posicionamiento fijo&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fijo&lt;/div&gt;
+
+&lt;p&gt;Párrafo 1.&lt;/p&gt;
+&lt;p&gt;Párrafo 2.&lt;/p&gt;
+&lt;p&gt;Párrafo 3.&lt;/p&gt;
+</pre>
+
+<div id="Fixed_1">
+<div class="hidden">
+<h6 id="Ejemplo_de_posicionamiento_fijo">Ejemplo de posicionamiento fijo</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posicionamiento fijo&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fijo&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="Posicionamiento_pegajoso">Posicionamiento pegajoso</h3>
+
+<p>El posicionamiento pegajoso es el último método de posicionamiento que tenemos a nuestra disposición. Mezcla el posicionamiento estático predeterminado con el posicionamiento fijo. Cuando un elemento tiene la propiedad <code>position: sticky</code>, se desplaza en flujo normal hasta que se alcanzan los desplazamientos con respecto a la ventana gráfica que hemos definido. En ese punto se queda «atascado» como si tuviera configurado un valor <code>position: fixed</code>.</p>
+
+<div id="Sticky_1">
+<div class="hidden">
+<h6 id="Ejemplo_de_posicionamiento_pegajoso">Ejemplo de posicionamiento pegajoso</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Posicionamiento pegajoso&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;Pegajoso&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="note">
+<p><strong>Nota</strong>: para obtener más información sobre el posicionamiento, consulta nuestro artículo <a href="/es/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a>.</p>
+</div>
+
+<h2 id="Diseño_de_tablas">Diseño de tablas</h2>
+
+<p>Las tablas HTML sirven para mostrar datos tabulados, pero hace muchos años, antes incluso de que el CSS básico fuera compatible de forma fiable en todos los navegadores, los desarrolladores web también usaban tablas para hacer el diseño completo de una página web, colocando en las diversas filas y columnas de una tabla los títulos de encabezado de la página, los pies de página, las diferentes columnas, etc. Esto funcionó en ese momento, pero presenta muchos problemas: los diseños de tabla no son flexibles, requieren mucho código de marcado, son difíciles de depurar y no son semánticamente correctos (por ejemplo, los usuarios de lectores de pantalla tienen problemas para navegar por estos diseños de página web con tablas).</p>
+
+<p>El aspecto que presenta una tabla en una página web cuando usas el código de marcado de una tabla se debe a un conjunto de propiedades CSS que definen el diseño de la tabla. Estas propiedades se pueden usar para diseñar elementos que no son tablas, un uso que a veces se describe como «usar tablas CSS».</p>
+
+<p>El ejemplo siguiente muestra uno de esos usos; el uso de tablas CSS para el diseño debe considerarse en este punto un método heredado, para aquellas situaciones en las que tienes navegadores muy antiguos que no son compatibles con los métodos Flexbox o Grid.</p>
+
+<p>Veamos un ejemplo. Primero, un código de marcado sencillo que crea un formulario HTML. Cada elemento de entrada tiene una etiqueta, y también hemos incluido un título dentro de un párrafo. Cada par etiqueta/entrada está delimitado por un elemento {{htmlelement ("div")}}, con fines de compaginación.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;En primer lugar, díganos su nombre y edad.&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;Nombre:&lt;/label&gt;
+    &lt;input type="text" id="fname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Apellidos:&lt;/label&gt;
+    &lt;input type="text" id="lname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="age"&gt;Edad:&lt;/label&gt;
+    &lt;input type="text" id="age"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Ahora, el CSS para nuestro ejemplo. La mayor parte del CSS es bastante común, excepto por los usos de la propiedad {{cssxref ("display")}}. A los elementos {{htmlelement ("form")}}, {{htmlelement ("div")}}, {{htmlelement ("label")}} y {{htmlelement ("input")}} se les dice que se muestren como una tabla, filas de tabla y celdas de tabla, respectivamente; actuarán básicamente como marcas de tabla HTML, y lograrán por defecto la alineación perfecta de las etiquetas y las entradas. Todo lo que hay que hacer es añadir un poco de tamaños, márgenes, etc., para que todo se vea un poco mejor, ¡y listo!</p>
+
+<p>Observa que se la ha proporcionado al párrafo de encabezado <code>display: table-caption;,</code> lo que hace que actúe como una celda de encabezado ({{htmlelement ("caption")}}) de la tabla; y con <code>caption-side: bottom;</code> se le dice a la celda de encabezado que se asiente en la parte inferior de la tabla con fines de aplicación de estilo, aunque en el código fuente el marcado está antes que los elementos <code>&lt;input&gt;</code>. Esto permite un poco de flexibilidad.</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>Esto nos da el resultado siguiente:</p>
+
+<p>{{ EmbedLiveSample('Table_layout', '100%', '170') }}</p>
+
+<p>También puedes ver este ejemplo en vivo en <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (ver el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">código fuente</a>).</p>
+
+<h2 id="Diseño_en_columnas">Diseño en columnas</h2>
+
+<p>El módulo de diseño en columnas nos proporciona un modo de distribuir el contenido en columnas, de forma similar al modo como el texto fluye en un periódico. Aunque en un contexto web leer en columnas de arriba a abajo no resulta tan útil porque podría obligar a los usuarios a tener que hacer desplazamientos de arriba a abajo, la técnica de organizar el contenido en columnas también puede tener su utilidad.</p>
+
+<p>Para convertir un bloque en un contenedor, utilizamos la propiedad {{cssxref ("column-count")}}, que le dice al navegador cuántas columnas nos gustaría tener, o {{cssxref ("column-width")}}, que le dice al navegador que llene el contenedor con tantas columnas de al menos ese ancho.</p>
+
+<p>En el ejemplo siguiente comenzamos con un bloque de HTML dentro de un elemento <code>&lt;div&gt;</code> que contiene una clase <code>container</code>.</p>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+    &lt;H1&gt;Diseño en columnas&lt;/ h1&gt;
+
+    &lt;p&gt;Párrafo 1.&lt;/p&gt;
+    &lt;p&gt;Párrafo 2.&lt;/p&gt;
+
+&lt;/div&gt;
+</pre>
+
+<p>Utilizamos un <code>column-width</code> de 200 píxeles en ese contenedor, que crea en el navegador tantas columnas de 200 píxeles como quepan en el contenedor y luego comparte el espacio restante entre las columnas creadas.</p>
+
+<div id="Multicol_1">
+<div class="hidden">
+<h6 id="Ejemplo_de_diseño_en_columnas">Ejemplo de diseño en columnas</h6>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+        &lt;h1&gt; Diseño en columnas &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="Resumen">Resumen</h2>
+
+<p>Este artículo ha proporcionado un breve resumen de todas las tecnologías de diseño que debes conocer. ¡Sigue leyendo para obtener más información sobre cada tecnología individual!</p>
+
+<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "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 medios</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 en 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>
diff --git a/files/es/learn/css/css_layout/positioning/index.html b/files/es/learn/css/css_layout/positioning/index.html
new file mode 100644
index 0000000000..3deb33b91f
--- /dev/null
+++ b/files/es/learn/css/css_layout/positioning/index.html
@@ -0,0 +1,469 @@
+---
+title: Positioning
+slug: Learn/CSS/CSS_layout/Positioning
+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 posicionamiento permite sacar elementos del flujo normal del diseño del documento, y hacer que se comporten de manera distinta, por ejemplo sentarse encima de otro o permanecer en el mismo lugar dentro de la ventana navegador. Este artículo explica los diferentes valores {{cssxref("position")}}, y como usarlos.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Requisitos:</th>
+   <td>HTML básico (Aprende <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML"> Introducción a HTML</a>), y una idea de cómo trabaja CSS (Aprende  <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducción a CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivos:</th>
+   <td>Entender como trabajar con posicionamiento CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Flujo_del_Documento">Flujo del Documento</h2>
+
+<p>El posicionamiento es un tema bastante complejo, así que antes de profundizar en el código volvamos a examinar y ampliar un poco la teoría del diseño para darnos una idea de cómo funciona esto.</p>
+
+<p>First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">box model</a> thing again, which we looked at earlier. By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are all tall as their content, and as wide as their content. You can't set width or height on inline elements — they just sit inside the content of block level elements. If you want to control the size of an inline element in this manner, you need to set it to behave like a block level element with <code>display: block;</code>.</p>
+
+<p>That explains individual elements, but what about how elements interact with one another? The <strong>normal layout flow</strong> (mentioned in the layout introduction article) is the system by which elements are placed inside the browser's viewport. By default, block level elements are laid out vertically in the viewport — each one will appear on a new line below the last one, and they will be separated by any margin that is set on them.</p>
+
+<p>Inline elements behave differently — they don't appear on new lines; instead, they sit on the same line as one another and any adjacent (or wrapped) text content, as long as there is space for them to do so inside the width of the parent block level element. If there isn't space, then the overflowing text or elements will move down to a new line.</p>
+
+<p>If two adjacent elements both have margin set on them and the two margins touch, the larger of the two remains, and the smaller one disappears — this is called <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">margin collapsing</a>, and we have met this before too.</p>
+
+<p>Let's look at a simple example that explains all this:</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>We will be revisiting this example a number of times as we go through this article, as we show the effects of the different positioning options available to us.</p>
+
+<p>We'd like you to follow along with the exercises on your local computer, if possible — grab a copy of <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> from our Github repo (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">source code here</a>) and use that as a starting point.</p>
+
+<h2 id="Introducing_positioning">Introducing positioning</h2>
+
+<p>The whole idea of positioning is to allow us to override the basic document flow behaviour described above, to produce interesting effects. What if you want to slightly alter the position of some boxes inside a layout from their default layout flow position, to give a slightly quirky, distressed feel? Positioning is your tool. Or if you want to create a UI element that floats over the top of other parts of the page, and/or always sits in the same place inside the browser window no matter how much the page is scrolled? Positioning makes such layout work possible.</p>
+
+<p>There are a number of different types of positioning that you can put into effect on HTML elements. To make a specific type of positioning active on an element, we use the {{cssxref("position")}} property.</p>
+
+<h3 id="Static_positioning">Static positioning</h3>
+
+<p>Static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here."</p>
+
+<p>To demonstrate this, and get your example set up for future sections, first add a <code>class</code> of <code>positioned</code> to the second {{htmlelement("p")}} in the HTML:</p>
+
+<pre class="brush: html">&lt;p class="positioned"&gt; ... &lt;/p&gt;</pre>
+
+<p>Now add the following rule to the bottom of your CSS:</p>
+
+<pre class="brush: css">.positioned {
+  position: static;
+  background: yellow;
+}</pre>
+
+<p>If you now save and refresh, you'll see no difference at all, except for the updated background color of the 2nd paragraph. This is fine — as we said before, static positioning is the default behaviour!</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the example at this point live at <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">see source code</a>).</p>
+</div>
+
+<h3 id="Relative_positioning">Relative positioning</h3>
+
+<p>Relative positioning is the first position type we'll take a look at. This is very similar to static positioning, except that once the positioned element has taken its place in the normal layout flow, you can then modify its final position, including making it overlap other elements on the page. Go ahead and update the position declaration in your code:</p>
+
+<pre class="brush: css">position: relative;</pre>
+
+<p>If you save and refresh at this stage, you won't see a change in the result at all — so how do you modify the element's position? You need to use the {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} properties, which we'll explain in the next section.</p>
+
+<h3 id="Introducing_top_bottom_left_and_right">Introducing top, bottom, left, and right</h3>
+
+<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} are used alongside {{cssxref("position")}} to specify exactly where to move the positioned element to. To try this out, add the following declarations to the <code>.positioned</code> rule in your CSS:</p>
+
+<pre>top: 30px;
+left: 30px;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: The values of these properties can take any <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">units</a> you'd logically expect — pixels, mm, rems, %, etc.</p>
+</div>
+
+<p>If you now save and refresh, you'll get a result something like this:</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>Cool, huh? Ok, so this probably wasn't what you were expecting — why has it moved to the bottom and right if we specified top and left? Illogical as it may initially sound, this is just the way that relative positioning works — you need to think of an invisible force that pushes the side of the positioned box, moving it in the opposite direction. So for example, if you specify <code>top: 30px;</code>, a force pushes the top of the box, causing it to move downwards by 30px.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the example at this point live at <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">see source code</a>).</p>
+</div>
+
+<h3 id="Absolute_positioning">Absolute positioning</h3>
+
+<p>Absolute positioning brings very different results. Let's try changing the position declaration in your code as follows:</p>
+
+<pre>position: absolute;</pre>
+
+<p>If you now save and refresh, you should see something like so:</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;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: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}</p>
+
+<p>First of all, note that the gap where the positioned element should be in the document flow is no longer there — the first and third elements have closed together like it no longer exists! Well, in a way, this is true. An absolutely positioned element no longer exists in the normal document layout flow. Instead, it sits on its own layer separate from everything else. This is very useful — it means that we can create isolated UI features that don't interfere with the position of other elements on the page — for example popup information boxes and control menus, rollover panels, UI features that can be dragged and dropped anywhere on the page, and so on.</p>
+
+<p>Second, notice that the position of the element has changed — this is because {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} behave in a different way with absolute positioning. Instead of specifying the direction the element should move in, they specify the distance the element should be from each containing element's sides. So in this case, we are saying that the absolutely positioned element should sit 30px from the top of the "containing element", and 30px from the left.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can use {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} to resize elements if you need to. Try setting <code>top: 0; bottom: 0; left: 0; right: 0;</code> and <code>margin: 0;</code> on your positioned elements and see what happens! Put it back again afterwards...</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Yes, margins still affect positioned elements. Margin collapsing doesn't, however.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the example at this point live at <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">see source code</a>).</p>
+</div>
+
+<h3 id="Positioning_contexts">Positioning contexts</h3>
+
+<p>Which element is the "containing element" of an absolutely positioned element? By default, it is the {{htmlelement("html")}} element — the positioned element is nested inside the {{htmlelement("body")}} in the HTML source, but in the final layout, it is 30px away from the top and left of the edge of the page, which is the {{htmlelement("html")}} element. This is more accurately called the element's <strong>positioning context</strong>.</p>
+
+<p>We can change the <strong>positioning context</strong> — which element the absolutely positioned element is positioned relative to. This is done by setting positioning on one of the element's other ancestors — one of the elements it is nested inside (you can't position it relative to an element it is not nested inside). To demonstrate this, add the following declaration to your body rule:</p>
+
+<pre>position: relative;</pre>
+
+<p>This should give the following result:</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>The positioned element now sits relative to the {{htmlelement("body")}} element.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the example at this point live at <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">see source code</a>).</p>
+</div>
+
+<h3 id="Introducing_z-index">Introducing z-index</h3>
+
+<p>All this absolute positioning is good fun, but there is another thing we haven't considered yet — when elements start to overlap, what determines which elements appear on top of which other elements? In the example we've seen so far, we only have one positioned element in the positioning context, and it appears on the top, since positioned elements win over non-positioned elements. What about when we have more than one?</p>
+
+<p>Try adding the following to your CSS, to make the first paragraph absolutely positioned too:</p>
+
+<pre>p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}</pre>
+
+<p>At this point you'll see the first paragraph colored green, moved out of the document flow, and positioned a bit above from where it originally was. It is also stacked below the original <code>.positioned</code> paragraph, where the two overlap. This is because the <code>.positioned</code> paragraph is the second paragraph in the source order, and positioned elements later in the source order win over positioned elements earlier in the source order.</p>
+
+<p>Can you change the stacking order? Yes, you can, by using the {{cssxref("z-index")}} property. "z-index" is a reference to the z-axis. You may recall from previous points in the source where we discussed web pages using horizontal (x-axis) and vertical (y-axis) coordinates to work out positioning for things like background images and drop shadow offsets. (0,0) is at the top left of the page (or element), and the x- and y-axes run across to the right and down the page (for left to right languages, anyway.)</p>
+
+<p>Web pages also have a z-axis — an imaginary line that runs from the surface of your screen, towards your face (or whatever else you like to have in front of the screen). {{cssxref("z-index")}} values affect where positioned elements sit on that axis — positive values move them higher up the stack, and negative values move them lower down the stack. By default, positioned elements all have a <code>z-index</code> of auto, which is effectively 0.</p>
+
+<p>To change the stacking order, try adding the following declaration to your <code>p:nth-of-type(1)</code> rule:</p>
+
+<pre>z-index: 1;</pre>
+
+<p>You should now see the finished example:</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>Note that <code>z-index</code> only accepts unitless index values; you can't specify that you want one element to be 23 pixels up the Z-axis — it doesn't work like that. Higher values will go above lower values, and it is up to you what values you use. Using 2 and 3 would give the same effect as 300 and 40000.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the example at this point live at <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">see source code</a>).</p>
+</div>
+
+<h3 id="Fixed_positioning">Fixed positioning</h3>
+
+<p>There is one more type of positioning to cover — fixed. This works in exactly the same way as absolute positioning, with one key difference — whereas absolute positioning fixes an element in place relative to the {{htmlelement("html")}} element or its nearest positioned ancestor, fixed positioning fixes an element in place relative to the browser viewport itself. This means that you can create useful UI items that are fixed in place, like persisting navigation menus.</p>
+
+<p>Let's put together a simple example to show what we mean. First of all, delete the existing <code>p:nth-of-type(1)</code> and <code>.positioned</code> rules from your CSS.</p>
+
+<p>Now, update the <code>body</code> rule to remove the <code>position: relative;</code> declaration and add a fixed height, like so:</p>
+
+<pre>body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}</pre>
+
+<p>Now we're going to give the {{htmlelement("h1")}} element <code>position: fixed;</code>, and get it to sit at the top center of the viewport. Add the following rule to your CSS:</p>
+
+<pre>h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}</pre>
+
+<p>The <code>top: 0;</code> is required to make it stick to the top of the screen; we then give the heading the same width as the content column and use the faithful old <code>margin: 0 auto;</code> trick to center it. We then give it a white background and some padding, so the content won't be visible underneath it.</p>
+
+<p>If you save and refresh now, you'll see a fun little effect whereby the heading stays fixed, and the content appears to scroll up and disappear underneath it. But we could improve this more — at the moment some of the content starts off underneath the heading. This is because the positioned heading no longer appears in the document flow, so the rest of the content moves up to the top. We need to move it all down a bit; we can do this by setting some top margin on the first paragraph. Add this now:</p>
+
+<pre>p:nth-of-type(1) {
+  margin-top: 60px;
+}</pre>
+
+<p>You should now see the finished example:</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>Note</strong>: You can see the example at this point live at <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">see source code</a>).</p>
+</div>
+
+<h3 id="Experimental_position_sticky">Experimental: position sticky</h3>
+
+<p>There is a new positioning value available called <code>position: sticky</code>, support for which is not very widespread yet. This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the viewport), after which it becomes fixed.  See our <a href="/en-US/docs/Web/CSS/position#Sticky_positioning">position: sticky reference entry</a> for more details and an example.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>I'm sure you had fun playing with basic positioning — it is one of the essential tools behind creating complex CSS layouts and UI features. With that in mind, in the next article we'll have even more fun with positioning — there we'll go a step further and start to build up some real world useful things with it.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</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/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/Practical_positioning_examples">Practical positioning examples</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">Grids</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html b/files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html
new file mode 100644
index 0000000000..18065a1da5
--- /dev/null
+++ b/files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html
@@ -0,0 +1,237 @@
+---
+title: Soporte a navegadores antiguos
+slug: Learn/CSS/CSS_layout/Soporte_a_navegadores_antiguos
+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 este módulo recomendamos utilizar Flexbox y Grid como las herramientas principales para tus diseños. Sin embargo, habrá visitantes a tu sitio web que usen navegadores antiguos o navegadores que no admiten los métodos que has utilizado. Este siempre será el caso en la red: a medida que se desarrollan funciones nuevas, los diferentes navegadores priorizan cosas diferentes. Este artículo explica cómo usar técnicas web modernas sin perjudicar a los usuarios con tecnologías más antiguas.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender cómo proporcionar compatibilidad para tus diseños en navegadores antiguos que podrían no admitir las funciones que deseas utilizar.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Cuál_es_la_vista_del_navegador_para_tu_sitio">¿Cuál es la vista del navegador para tu sitio?</h2>
+
+<p>Cada sitio web es diferente en términos de público objetivo. Antes de decidir el enfoque a seguir, averigua la cantidad de visitantes que visitan tu sitio que utilizan navegadores antiguos. Esto es sencillo si se trata de un sitio web que simplemente modificas o reemplazas, porque probablemente haya análisis disponibles que te indiquen la tecnología que la gente utiliza. Si el sitio no tiene funciones de análisis o se trata de un sitio nuevo, hay sitios como <a href="http://gs.statcounter.com/">Statcounter</a> que pueden proporcionar estadísticas filtradas por ubicación.</p>
+
+<p>También debes considerar el tipo de dispositivos y la forma en que las personas usan tu sitio; por ejemplo, puedes esperar un número de dispositivos móviles superior al promedio. La accesibilidad y las personas que utilizan tecnología de asistencia siempre deben tenerse en cuenta, pero para algunos sitios pueden ser aspectos aún más críticos. Según experiencia propia, los desarrolladores a menudo se preocupan demasiado por la experiencia de usuario de un 1% de usuarios que usan una versión antigua de Internet Explorer, y no consideran en absoluto el número mucho mayor de usuarios que tiene necesidades de accesibilidad especiales.</p>
+
+<h2 id="¿Qué_compatibilidad_presentan_las_funciones_que_vas_a_usar">¿Qué compatibilidad presentan las funciones que vas a usar?</h2>
+
+<p>Una vez conozcas qué tipo de navegadores utiliza la gente que accede a tu sitio, puedes evaluar cualquier tecnología que desees utilizar según su compatibilidad y con qué facilidad es posible proporcionar una alternativa a los visitantes que no disponen de esa tecnología. Tratamos de facilitarte esta experiencia proporcionando información de compatibilidad de los navegadores en cada una de las páginas que detallan una propiedad CSS. Por ejemplo, echa un vistazo a la página de {{cssxref ("grid-template-columns")}}. En la parte inferior de esta página hay una tabla que enumera los navegadores principales, junto con la versión en la que comenzaron a admitir esta propiedad.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16047/browser-table.png" style="height: 1178px; width: 2102px;"></p>
+
+<p>Otra forma popular de averiguar la compatibilidad de una característica es el sitio web <a href="https://caniuse.com/">Can I Use</a>. Este sitio enumera la mayoría de las características de la Plataforma Web con información sobre el estado de compatibilidad de tu navegador. Puedes ver las estadísticas de uso por ubicación, cosa que resulta útil si trabajas en un sitio cuyos usuarios son de un territorio particular. Incluso puedes vincular tu cuenta de Google Analytics para obtener un análisis basado en tus datos de usuario.</p>
+
+<p>Conocer las tecnologías de tus usuarios y las compatibilidades de las funciones que tal vez quieras usar te proporcionan una buena base para tomar todas tus decisiones y saber cuál es la mejor manera de dar compatibilidad a todos tus usuarios.</p>
+
+<h2 id="Compatibilidad_no_significa_«verse_igual»">Compatibilidad no significa «verse igual»</h2>
+
+<p>Es posible que un sitio web no tenga el mismo aspecto en todos los navegadores, porque algunos de tus usuarios lo verán en un teléfono y otros en el ordenador. Del mismo modo, algunos de tus usuarios tendrán una versión antigua del navegador y otros el navegador más reciente. Es posible que algunos de tus usuarios estén escuchando el contenido leído por un lector de pantalla, o hayan ampliado la página para poderla leer. Dar compatibilidad a todos significa servir una versión de tus contenidos diseñada estratégicamente para que se vea genial con los navegadores modernos, pero aún sea utilizable en un nivel básico para los usuarios con navegadores más antiguos.</p>
+
+<p>Un nivel básico de compatibilidad proviene de estructurar bien tus contenidos para que el flujo normal de tu página tenga sentido. Un usuario con un teléfono con funciones muy limitadas puede que no obtenga buena parte de tu CSS, pero el contenido fluirá de una manera que la lectura resulte fácil. Por lo tanto, un documento HTML bien estructurado siempre debe ser tu punto de partida. <em>¿Tu contenido tiene sentido si eliminas tu hoja de estilo?</em></p>
+
+<p>Una opción es dejar esta vista simple del sitio como alternativa para las personas que utilizan navegadores muy antiguos o limitados. Si la cantidad de personas que visitan el sitio con estos navegadores es pequeña, quizá no tenga sentido comercial dedicar tiempo a tratar de proporcionarles una experiencia similar a la de las personas que utilizan navegadores modernos. Sería mejor dedicar el tiempo a cosas que proporcionen accesibilidad al sitio, y servir así a muchos más usuarios. Hay un punto medio entre una página HTML simple y todos esos recursos, y CSS realmente ha logrado que proporcionar estas soluciones alternativas resulte bastante sencillo.</p>
+
+<h2 id="Crear_soluciones_alternativas_en_CSS">Crear soluciones alternativas en CSS</h2>
+
+<p>Las especificaciones CSS contienen información que explica qué hace el navegador cuando se aplican dos métodos de diseño al mismo elemento. Esto significa que hay una definición de lo que sucede si un elemento flotante, por ejemplo, también es un elemento Grid que usa diseño de cuadrícula CSS. Combina esta información con el conocimiento de que los navegadores ignoran el CSS que no entienden, y tienes una manera de crear diseños simples utilizando las <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">técnicas heredadas</a> que ya hemos expuesto, que luego se sobrescriben con tu diseño de cuadrícula en los navegadores modernos que lo entienden.</p>
+
+<p>En el ejemplo siguiente hemos especificado tres elementos de flotación <code>&lt;div&gt;</code> para que se muestren en una fila. Cualquier navegador que no sea compatible con el método de compaginación <a href="/es/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> verá la hilera de cajas como un diseño con el método de flotación. Un elemento de flotación que se convierte en un elemento de cuadrícula pierde el comportamiento de flotación, lo que significa que al convertir el contenedor en un contenedor de cuadrícula, los elementos de flotación se convierten en elementos de cuadrícula. Si el navegador admite el diseño de cuadrícula, muestra la vista de cuadrícula; si no, ignora las propiedades relacionadas con el diseño de cuadrícula y utiliza el diseño de flotación.</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;Artículo uno&lt;/div&gt;
+  &lt;div class="item"&gt;Artículo dos&lt;/div&gt;
+  &lt;div class="item"&gt;Artículo tres&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example1', '100%', '200') }}</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: La propiedad {{cssxref ("clear")}} tampoco tiene efecto una vez que el elemento al que se le aplica se convierte en un elemento de cuadrícula, por lo que podrías tener una compaginación con un pie <code>clear</code>, que luego pase a ser un elemento de compaginación en cuadrícula.</p>
+</div>
+
+<h3 id="Métodos_de_soluciones_alternativas">Métodos de soluciones alternativas</h3>
+
+<p>Numerosos métodos de compaginación se pueden usar de manera similar a este ejemplo con comportamiento de flotación. Puedes elegir el que tenga más sentido para el patrón de compaginación que necesitas crear.</p>
+
+<dl>
+ <dt><strong><code>float</code></strong> y <strong><code>clear</code></strong></dt>
+ <dd>Como se muestra arriba, las propiedades <em>float</em> o <em>clear</em> dejan de afectar a la compaginación si los elementos afectados por estas propiedades pasan a ser de tipo flexible o de cuadrícula.</dd>
+ <dt>display: inline-block;</dt>
+ <dd>Este método se puede utilizar para crear compaginaciones en columnas; si un elemento tiene establecido un comportamiento <code>display: inline-block</code> pero se convierte a elemento con compaginación de tipo flexible o de cuadrícula, el comportamiento <code>inline-block</code> se ignora.</dd>
+ <dt>display: table;</dt>
+ <dd>El método de creación de tablas CSS que se describe en la <a href="/es/docs/Learn/CSS/CSS_layout/Introducción">introducción</a> de estos artículos puede utilizarse como opción alternativa. Los elementos que tienen diseños de tabla CSS pierden este comportamiento si se convierten en elementos con comportamiento flexible o de cuadrícula. Es importante destacar que no se crearán las cajas sin nombre que fueron creadas para arreglar la estructura de tabla.</dd>
+ <dt>Compaginación en columnas</dt>
+ <dd>Para ciertos tipos de compaginación puedes usar <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">multi-col</a> como opción alternativa; si tu contenedor tiene alguna propiedad <code>column-*</code> definida y se convierte en un contenedor con comportamiento de cuadrícula, se anula el comportamiento en columnas.</dd>
+ <dt>Flexbox como opción alternativa a la cuadrícula</dt>
+ <dd><a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> tiene una compatibilidad mayor con los navegadores que Grid porque es compatible con Internet Explorer 10 y 11, aunque te recomendamos que consultes la información que encontrarás más adelante en este artículo sobre la compatibilidad bastante irregular y confusa de Flexbox en navegadores más antiguos. Si conviertes un contenedor flexible en un contenedor de cuadrícula, se ignorará cualquier propiedad <code>flex</code> aplicada a los elementos secundarios.</dd>
+</dl>
+
+<p>Observa que si usas el CSS de esta manera puedes proporcionar una experiencia de usuario decente para ajustar muchas compaginaciones en navegadores antiguos. Añadimos una compaginación más simple basada en técnicas antiguas y con buena compatibilidad, y luego usamos el CSS más nuevo para crear la compaginación que va a ver más del 90% de tu público. Sin embargo, hay casos en los que el código alternativo va a tener que incluir algo que también van a interpretar los navegadores nuevos. Un buen ejemplo de esto es si queremos añadir anchos en porcentaje a nuestros elementos de flotación para que el aspecto de las columnas reproduzca mejor la visualización en cuadrícula, expandiendo para llenar el contenedor.</p>
+
+<p>En la compaginación de flotación, el porcentaje se calcula con respecto al contenedor: 33,333% es un tercio del ancho del contenedor. Sin embargo, en el método Grid ese 33,333% se calcula con respecto al área de la cuadrícula en la que el elemento está ubicado, por lo que en realidad se convierte en un tercio del tamaño que queremos una vez que se introduce la compaginación en cuadrícula.</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;Artículo uno&lt;/div&gt;
+  &lt;div class="item"&gt;Artículo dos&lt;/div&gt;
+  &lt;div class="item"&gt;Artículo tres&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example2', '100%', '200') }}</p>
+</div>
+
+<p>Para tratar este problema, necesitamos tener un modo de detectar si Grid es compatible y, por lo tanto, si anulará el ancho. El CSS tiene una solución.</p>
+
+<h2 id="Consultar_las_propiedades">Consultar las propiedades</h2>
+
+<p>Consultar las propiedades te permite comprobar si un navegador admite alguna característica CSS en particular. Esto significa que puedes escribir algunos CSS para navegadores que no admitan una propiedad determinada y luego verificar si el navegador es compatible, y añadir tu elegante diseño de ser así.</p>
+
+<p>Si añadimos al ejemplo anterior una consulta de las propiedades, podemos usarla para volver a establecer a <code>auto</code> los anchos de nuestros elementos, si sabemos que hay compatibilidad para la compaginación en cuadrícula.</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;Elemento uno&lt;/div&gt;
+  &lt;div class="item"&gt;Elemento dos&lt;/div&gt;
+  &lt;div class="item"&gt;Elemento tres&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example3', '100%', '200') }}</p>
+</div>
+
+<p>La compatibilidad para la consulta de propiedades es muy buena en todos los navegadores modernos, pero debes tener en cuenta que son los navegadores que no admiten CSS Grid los que tampoco admiten la consulta de propiedades. Esto significa que para esos navegadores funcionará un enfoque como el que acabamos de detallar. Lo que hacemos es escribir primero nuestro CSS anterior sin hacer ninguna consulta de propiedades. Los navegadores que no admiten Grid y que no admiten la consulta de propiedades utilizan esa información de diseño que pueden entender e ignoran por completo todo lo demás. Los navegadores que admiten la consulta de propiedades también admiten CSS Grid y, por lo tanto, ejecutan el código de cuadrícula y el código de la consulta de propiedades.</p>
+
+<p>La especificación para la consulta de propiedades también incluye la posibilidad de probar si un navegador no admite una propiedad; esto solo es útil si el navegador admite consultas de propiedades. En el futuro bastará con el enfoque de verificar la falta de compatibilidad, porque los navegadores que no tienen compatibilidad para la consulta de propiedades desaparecen. Por ahora, sin embargo, utiliza el enfoque de usar el CSS anterior y luego sobrescribirlo para obtener la mejor compatibilidad.</p>
+
+<h2 id="Versiones_anteriores_de_Flexbox">Versiones anteriores de Flexbox</h2>
+
+<p>En versiones anteriores de navegadores, puedes encontrar versiones anteriores de la especificación Flexbox. En el momento de escribir esto se trata principalmente de un problema con Internet Explorer 10, que usa el prefijo <code>-ms-</code> para Flexbox. Esto también significa que algunos artículos y tutoriales están obsoletos; <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">esta guía útil</a> te ayuda a verificarlo y también puede ayudarte si necesitas compatibilidad Flexbox en navegadores muy antiguos.</p>
+
+<h2 id="La_versión_prefijada_de_Grid_de_Internet_Explorer_10_y_11">La versión prefijada de Grid de Internet Explorer 10 y 11</h2>
+
+<p>La especificación CSS Grid se prototipó inicialmente en Internet Explorer 10; esto significa que si bien IE10 e IE11 no tienen compatibilidad de cuadrícula <em>moderna</em>, sí tienen una versión de compaginación en cuadrícula, que es muy útil, aunque diferente de la especificación moderna que documentamos en este sitio. Las implementaciones de IE10 y 11 tienen el prefijo <code>-ms-</code>, lo que significa que puedes usarlo para estos navegadores y los navegadores que no sean de Microsoft lo ignorarán. Sin embargo, Edge todavía comprende la sintaxis anterior, así que ten cuidado de que todo se sobrescriba de forma segura en tu cuadrícula de CSS moderna.</p>
+
+<p>La guía de <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Mejora progresiva en la compaginación en cuadrícula</a> puede ayudarte a comprender la versión de la cuadrícula de Internet Explorer, y hemos incluido algunos enlaces útiles adicionales al final de este artículo. Sin embargo, a menos que tengas una gran cantidad de visitantes con versiones anteriores de Internet Explorer, puede que te resulte mejor centrarte en crear una reserva que funcione para todos los navegadores no compatibles.</p>
+
+<h2 id="Pruebas_con_navegadores_antiguos">Pruebas con navegadores antiguos</h2>
+
+<p>Dado que la mayoría de los navegadores ya son compatibles con Flexbox y Grid, puede resultar en efecto difícil hacer pruebas con navegadores más antiguos. Una forma es utilizar una herramienta de prueba en línea como Sauce Labs, como se detalla en el módulo de <a href="/es/docs/Learn/Herramientas_y_pruebas/Cross_browser_testing">comprobación de compatibilidad entre navegadores</a>.</p>
+
+<p>También puedes descargar e instalar máquinas virtuales y ejecutar versiones anteriores de navegadores en un entorno de tu propio ordenador. Tener acceso a versiones anteriores de Internet Explorer es particularmente útil, y para ese propósito, Microsoft ha puesto a disposición de los usuarios una <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">variedad de máquinas virtuales de descarga gratuita</a>. Están disponibles para los sistemas operativos Mac, Windows y Linux, por lo que resultan una manera excelente de hacer pruebas con los navegadores Windows antiguos y modernos, incluso si no utilizas una computadora con sistema Windows.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Ahora tienes el conocimiento para usar con confianza técnicas como Grid y Flexbox, crear soluciones alternativas para navegadores más antiguos y utilizar cualquier técnica nueva que pueda surgir en el futuro.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Uso de consultas de propiedades en CSS</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Compatibilidad con versiones anteriores de Flexbox</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Compaginación en cuadrícula CSS y mejora progresiva</a></li>
+ <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">Uso de CSS Grid: Compatibilidad con navegadores sin comportamiento de cuadrícula</a></li>
+ <li><a href="https://24ways.org/2012/css3-grid-layout/">Un tutorial que usa las versiones IE10 y 11 de Grid</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/">¿Debo tratar de usar la implementación IE10 de Grid Layout?</a></li>
+ <li><a href="https://24ways.org/2017/cascading-web-design/">Diseño web en cascada con consulta de propiedades</a></li>
+ <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">Uso de las consultas de propiedades (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_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 medios</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>