En la actualidad existen muchas maneras de crear layouts utilizando CSS. A las técnicas tradicionales (float, inline-block) se suman otras nuevas aportadas por CSS3, como flexbox o CSS Grid Layout.

A continuación veremos las principales técnicas de creación de layouts utilizadas en el diseño web.

Float

Se utilizan para layouts que no necesitan centrado vertical ni alturas de capas iguales.

Ventajas:

  • Método más popular.
  • Al ser el método más popular, los fallos que se producen están muy bien documentados y se han desarrollado muchos métodos para corregirlos.

Desventajas:

  • Necesitan ser reseteados (clearfix). Si se utilizan media queries para personalizar la apariencia en función del dispositivo será necesario hacer un clear para cada adaptación.
  • No se pueden alinear en vertical.
  • Las alturas de las capas no son iguales.
  • Dependen del orden en que aparezcan las capas en el HTML.

Inline-block

Se utilizan cuando se necesitan layouts con las siguientes características:

  • Sitios que necesitan alineación vertical.
  • Para evitar tener que realizar el clear de los floats cuando se utilizan media queries.
  • Para realizar menús horizontales utilizando listas.

Ventajas:

  • Posibilidad de alineación vertical.
  • No necesitan hacer clear en diseños complejos adaptados a muchos dispositivos con media queries.

Desventajas:

  • Las alturas de las capas no son iguales.
  • Dependen del orden en que aparezcan las capas en el HTML.
  • Tienen un fallo que consiste en crear un espacio en blanco adicional (whitespace bug) entre los elementos. La solución si utilizamos listas consiste en utilizar tipos de documento HTML5 y no cerrar los elementos <li>. En este enlace se muestra el problema.

Ejemplo de galería con inline-block: http://karenmenezes.com/inlineblockgrid/

Display table

La propiedad display: table automáticamente transforma la apariencia de una capa en la de una tabla. De esta manera se consigue un diseño basado en columnas de manera muy sencilla sin tener que utilizar tablas reales (que, recordemos, no son recomendables).

Sin embargo, para tener un control total es necesario replicar la estructura de una tabla utilizando divs, por lo que se termina cayendo en el mismo error que al diseñar utilizando tablas.

<div class="tableWrap">
  <div class="tableBlock">

    <div class="tableRow">
      <div class="tableCell"> </div>
      <div class="tableCell"> </div>
      <div class="tableCell"> </div>
    </div>

    <div class="tableRow">
      <div class="tableCell"> </div>
      <div class="tableCell"> </div>
      <div class="tableCell"> </div>
    </div>

  </div>
</div>

Ventajas:

  • Posibilidad de alineación vertical.
  • Permite crear capas de alturas iguales.

Desventajas:

  • Es necesario crear <div> adicionales para simular la estructura de las tablas. No obstante, la especificación indica que no es obligatorio.
  • Dependen del orden en que aparezcan las capas en el HTML.
  • Para separar las celdas no se pueden utilizar los márgenes: hay que utilizar la propiedad border-collapse del elemento padre.
  • Es posible que el contenido traspase los límites de las celdas.
  • Es difícil de adaptar para crear diseños responsivos con varios puntos de ruptura.
  • Problemas con IE6 y IE7.

Cajas Flexibles (FlexBox)

FlexBox ofrece un mecanismo muy completo para realizar layouts. Tiene una gran variedad de opciones y es muy versátil. En este videotutorial sobre Flexbox se explica su funcionamiento.

Los siguientes recursos también son muy interesantes:

Ventajas:

  • Independencia del orden en que aparezcan las capas en el HTML. Elimina la necesidad de utilizar JavaScript para esto.
  • Ofrecen alineación vertical.
  • Permiten crear capas con la misma altura.
  • Permiten la estructura en filas o columnas de manera sencilla.
  • Ofrecen una gran flexibilidad en cuanto a las opciones a utilizar.
  • Las cajas pueden ocupar automáticamente el espacio disponible, crecer o menguar a petición.

Desventajas:

  • Existe una especificación inicial que ha quedado desfasada (hay que tener cuidado al buscar tutoriales en Internet).
  • La sintaxis es algo compleja.
  • Es necesario utilizar prefijos para soportar todos los navegadores.
  • No es compatible con IE9 y anteriores.

Grid layout

Su funcionamiento consiste en definir una serie de zonas dispuestas a modo de rejilla para a continuación asignar cada capa o sección a la zona correspondiente. En este videotutorial sobre CSS Grid se explica su funcionamiento.

Tiene múltiples ventajas, entre las que destacan las siguientes:

  • Eliminación total de la necesidad de definir capas contenedoras. Bastará con tener una capa para cada área independiente de la página.
  • Independencia del orden en que aparezcan las capas en el HTML.
  • Independencia completa entre HTML y presentación visual.

Para aprender más sobre Grid Layout puedes consultar:

Algunos consejos de diseño

  • Los bloques que aparecen uno debajo del otro no presentan problemas: se muestran correctamente si son display: block (recordemos que estos elementos introducen saltos de línea, por lo que se muestran uno a continuación del otro).
  • El problema aparece cuando tenemos capas que deben aparecer a la derecha o izquierda de otras. En ese caso tendremos que utilizar alguno de los métodos propuestos.
  • La manera más sencilla de diseñar el layout consiste en hacer agrupaciones por filas o columnas:
    • Se deben buscar las filas que lleguen a los extremos de las capas contenedoras.
    • Dentro de cada fila se procederá a agrupar por columnas que lleguen a su vez a los extremos de los contenedores.
    • Se continuará de esta manera (filas, columnas,…) hasta completar el diseño.
Agrupación por filas y columnas

<span class="figure-number">Figure 1: </span>Agrupación por filas y columnas

Por último, es recomendable pensar en el layout más adecuado para dispositivos móviles o pantallas pequeñas. Este tema será abordado con más detalle en otros artículos.