Esc

Introducción a los layouts en CSS

En CSS, un layout es la forma en que se organizan y distribuyen los elementos dentro de una página o sección. Determina dónde se colocan los elementos, cómo se alinean entre sí y cómo se adaptan al tamaño de la pantalla.

Nuestro objetivo es mostrar, a través de ejemplos simples y comparativos, cómo alinear elementos tanto en sentido horizontal como vertical, cómo organizar las distintas secciones de una página y en qué situaciones conviene aplicar cada técnica.

Queremos ayudarte a visualizar, practicar y comprender lo esencial para mejorar tus diseños y escribir CSS con mayor seguridad y claridad.

Antes de adentrarnos en block, inline-block, flex o grid, es fundamental entender algunos conceptos clave que determinan cómo se posicionan y comportan los elementos dentro de una página web.

Modelo de caja

Todo elemento en HTML es una caja. Este modelo define cómo se calcula el espacio que ocupa un elemento:
  • margin: El espacio externo, entre esta caja y otras.
  • border: El borde que rodea el contenido y el padding de un elemento, y se puede personalizar en grosor, estilo y color.
  • padding: Espacio interno, entre el contenido y el borde.
  • content: El contenido del elemento (texto, imagen, etc.).

Display

La propiedad display determina cómo se comporta la caja. Puede ser:
  • block: Ocupa todo el ancho disponible y comienza en una nueva línea.
  • inline: No inicia una nueva línea y solo ocupa el espacio necesario.
  • inline-block: Como inline, pero permite definir ancho, alto, etc.
  • flex y grid: Sistemas modernos de layout (los veremos en detalle más adelante).

Filas y columnas

Cuando hablamos de flex o grid, debemos pensar en filas y columnas.
  • En flex, los elementos se organizan en una sola fila o columna, según flex-direction.
  • En grid, se pueden organizar en filas y columnas simultáneamente.
  • Entender esta estructura ayuda a controlar cómo se alinean y distribuyen los elementos hijos.

Contenedor e hijo

Un layout siempre tiene una jerarquía:
  • El contenedor es el elemento padre que define el contexto (display: flex, grid, etc).
  • Los elementos hijos se comportan según las reglas de ese contexto.

Separación

Las propiedades gap, row-gap y column-gap permiten controlar la separación entre los elementos de un contenedor flex o grid:
  • gap: Define un espacio uniforme entre filas y columnas.
  • row-gap: Define solo la separación entre las filas.
  • column-gap: Define solo la separación entre las columnas.
  • Estas propiedades sustituyen al uso de margin en los hijos, haciendo el layout más limpio y predecible.

Responsividad

En la actualidad, los sitios web deben ser adaptables, capaces de ajustarse a diferentes tamaños de pantalla, desde móviles hasta monitores grandes. Las propiedades modernas como flex y grid permiten crear layouts que se reorganizan automáticamente. Esto facilita el desarrollo de diseños fluidos, consistentes y más mantenibles.

Unidades en CSS

En CSS existen varias unidades básicas que se usan para definir medidas como tamaños, márgenes, paddings, fuentes, etc. Se dividen en absolutas y relativas.

Unidades Absolutas

Estas no cambian según el contexto; siempre miden lo mismo.
  • px (píxeles): Unidad fija, ideal para detalles precisos.
  • cm, mm, in (centímetros, milímetros, pulgadas): Más comunes en impresión.
  • pt (puntos): Usado en tipografía, 1pt = 1/72 de pulgada.
  • pc (picas): 1pc = 12pt, también en tipografía.
  • Q (cuartos de milímetro): 1Q = 0.25mm, usado en impresión.

Unidades Relativas

Estas cambian según el contexto, como el tamaño de la pantalla o la fuente.
  • % (porcentaje): Relativo al elemento padre. Muy útil para layouts fluidos.
  • em: Relativo al tamaño de fuente del propio elemento. 2em = 2 veces ese tamaño. Usado en font-size, es relativo al del padre.
  • rem: Relativo al tamaño de fuente raíz (normalmente el del html). Más predecible que em.
  • vw (viewport width): 1vw = 1% del ancho de la ventana gráfica. Útil para diseños responsivos.
  • vh (viewport height): 1vh = 1% de la altura de la ventana gráfica.
  • vmin: El menor valor entre vw y vh.
  • vmax: El mayor valor entre vw y vh.
  • svw / svh: small viewport (útil en móviles con barras dinámicas).
  • lvw / lvh: Representa el tamaño máximo posible de la ventana gráfica, como si las barras de navegación (la superior o inferior del navegador) estuvieran ocultas.
  • dvw / dvh: Representa el tamaño actual del viewport, que cambia cuando aparecen o desaparecen las barras del navegador.