Diseños de columnas - CSS | MDN

HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.
View in English Always switch to English
A menudo necesitarás crear un diseño con varias columnas, y CSS ofrece varias formas de hacerlo. Usar el diseño multicolumna, flexbox o grid dependerá de lo que quieras lograr, y en esta receta exploramos estas opciones.
Hay varios patrones de diseño que podrías querer lograr con tus columnas:
Tienes que elegir distintos métodos de maquetación según lo que necesites lograr.
Si creas columnas con el diseño multicolumna, tu texto seguirá siendo un flujo continuo que va llenando cada columna por turnos. Todas las columnas deben tener el mismo tamaño, y no puedes seleccionar una columna concreta ni el contenido de una columna concreta.
Puedes controlar el espacio entre columnas con las propiedades column-gap o gap, y añadir una línea entre columnas con column-rule.
Haz clic en "Play" en los bloques de código de abajo para editar el ejemplo en el MDN Playground:
En este ejemplo, usamos la propiedad column-width para establecer el ancho mínimo que deben tener las columnas antes de que el navegador añada una columna más. La propiedad abreviada columns permite establecer las propiedades column-width y column-count, y cualquiera de ellas puede definir el número máximo de columnas permitido.
Usa el diseño multicolumna cuando:
Flexbox permite dividir el contenido en columnas estableciendo display: flex; para convertir un elemento padre en un contenedor flexible. Con solo añadir esta propiedad, todos los hijos (elementos hijos, pseudoelementos y nodos de texto) se convierten en elementos flexibles dispuestos en una sola línea. Si se establece la misma propiedad abreviada flex con un único valor numérico, todo el espacio disponible se reparte a partes iguales, lo que suele hacer que todos los elementos flexibles tengan el mismo tamaño, siempre que ninguno tenga contenido que no se ajuste y obligue a que el elemento sea más grande.
Se pueden usar márgenes o la propiedad gap para crear espacios entre los elementos, pero por ahora no hay ninguna propiedad CSS que añada líneas entre los elementos flexibles.
Para crear un diseño con elementos flexibles que pasen a nuevas filas, establece la propiedad flex-wrap del contenedor en wrap. Ten en cuenta que cada línea flexible reparte el espacio solo para esa línea. Los elementos de una línea no se alinearán necesariamente con los de otras líneas, como verás en el ejemplo siguiente. Por eso se dice que flexbox es unidimensional: está pensado para controlar el diseño como una fila o como una columna, pero no ambas a la vez.
Si quieres una cuadrícula bidimensional en la que los elementos se alineen en filas y columnas, deberías elegir el diseño de cuadrícula CSS. Al igual que flexbox actúa sobre los hijos directos del contenedor flexible, el diseño de cuadrícula actúa sobre los hijos directos del contenedor de cuadrícula. Solo tienes que establecer display: grid; en el contenedor. Las propiedades que se establecen en este contenedor, como grid-template-columns y grid-template-rows, definen cómo se reparten los elementos en filas y columnas.
Haz clic en "Play" en los bloques de código de abajo para editar el ejemplo en el MDN Playground:
Esta página se modificó por última vez el 30 sept 2026 por colaboradores de MDN.
Tu plano para una internet mejor.
Partes de este contenido son ©1998–2026 de colaboradores individuales de mozilla.org. Contenido disponible bajo una licencia Creative Commons.