1 files changed, 31 insertions, 0 deletions
diff --git a/files/es/web/css/layout_mode/index.html b/files/es/web/css/layout_mode/index.html
new file mode 100644
index 0000000000..5e671c9806
--- /dev/null
+++ b/files/es/web/css/layout_mode/index.html
@@ -0,0 +1,31 @@
+---
+title: Layout mode
+slug: Web/CSS/Layout_mode
+tags:
+  - CSS
+  - Layout
+  - Referencia
+translation_of: Web/CSS/Layout_mode
+---
+<div>{{cssref}}</div>
+
+<p>Un <strong>modo de diseño</strong> <a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a>(CSS layout mode), a veces simplemente llamado "<em>layout</em>", es un algoritmo que determina la posición y tamaño de cajas basado en la forma en la que interactúan con sus (elementos) hermanos y padres. Hay varios de ellos:</p>
+
+<ul>
+ <li>El <em>block layout</em>, diseñado para presentar documentos. El block layout contiene características de documento-centrado, como la capacidad de <a href="https://developer.mozilla.org/es/docs/Web/CSS/float">flotar</a>(<em>float</em>) elementos o distribuirlos en <em><a href="https://developer.mozilla.org/es/docs/Columnas_con_CSS-3">múltiples columnas.</a></em></li>
+ <li>El <em>inline layout,</em> diseñado para presentar texto.</li>
+ <li>El <em>table layout</em>, diseñado para presentar tablas.</li>
+ <li>El <em>positioned layout</em>, diseñado para posicionar elementos sin demasiada interacción con otros elementos. </li>
+ <li>El <em><a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox">flexible box layout</a></em>, diseñado para presentar páginas complejas que pueden redimensionarse de forma fluida.</li>
+ <li>El <em><a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout">grid layout</a></em>, diseñado para presentar elementos relativos a una cuadrícula fija (fixed grid).</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota: </strong>No todas las <a href="https://developer.mozilla.org/es/docs/Web/CSS/Referencia_CSS">propiedades CSS</a> aplican a todos los <em><strong>modos de diseño</strong></em>. La mayoría de ellos aplican a uno o dos de ellos y no tienen efecto si se configuran en un elemento que es parte de otro modo de diseño.</p>
+</div>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>