CSS: Separación

El método de diseño de cajas flexibles (flex) y el sistema de cuadrículas (grid) muestran, por defecto, las celdas pegadas a sus celdas contiguas. Para modificar esta separación interior entre celdas existe una serie de propiedades CSS específicas que son más apropiadas que el uso de márgenes.

Lista de propiedades:

Estas propiedades se aplican directamente sobre el elemento contenedor que define una caja flexible o una cuadrícula. Por lo tanto, siempre se encontrarán en la misma regla que contiene la propiedad CSS display con los valores siguientes: flex, inline-flex, grid o inline-grid.

La propiedad column-gap también se utiliza para maquetar con columnas. En este caso, la separación visual por defecto es de 1em.

Usar estas propiedades tiene muchas ventajas frente a la aplicación de márgenes entre los elementos hijos (ítems). De entrada, la separación entre ítems se gestiona desde el elemento contenedor y esto permite una buena reducción del código CSS. Gracias a ellas se puede crear diseños más predecibles y adaptables. De rebote, esta simplificación de código facilita su mantenimiento.

De hecho, estas propiedades forman parte de las especificaciones CSS de las cajas flexibles y de las cuadrículas. Por tanto, su uso en estos sistemas queda totalmente contextualizado, mejorando la consistencia del código.

Usar márgenes implicaría tener que configurar declaraciones específicas para filas y columnas. Habría que definir qué ítems tienen márgenes, y en qué arista. Teniendo en cuenta que con las cajas flexibles y las cuadrículas, los ítems cambian de posición al reubicarse, la maquetación se complicaría en exceso.

En las primeras versiones de la especificación, estas propiedades se llamaban grid-column-gap, grid-row-gap y grid-gap. Los navegadores web seguirán manteniendo la compatibilidad para estas propiedades.

En la actualidad se recomienda usar column-gap, row-gap y gap.

Las propiedades ‘column-gap’ y ‘row-gap’

Las propiedades column-gap y row-gap permiten establecer el tamaño de la separación entre las columnas y las filas, respectivamente, en un sistema de cajas flexibles (flex) o cuadrículas (grid). Para las cajas flexibles, puede que solo funcione una de las dos, dependiendo de la dirección principal del contenedor, a menos que los elementos hijos (ítems) desborden hacia la línea siguiente.

Estas propiedades admiten como valor una unidad de longitud, que puede ser relativa o absoluta. Debe introducirse un número positivo, por lo que los valores negativos no son válidos. El valor por defecto es 0: no hay separación entre celdas. Posibles valores válidos: 10px, 1em, 5% o 1cm.

Ejemplo con cajas flexibles

Vamos a ver un ejemplo de aplicación práctica con cajas flexibles. En el siguiente ejemplo, se crea una caja flexible cuyo eje principal es horizontal (por defecto). El contenedor tiene cinco elementos hijos (ítems) con un ancho del 20% cada uno. Le vamos a indicar una separación de 10 píxeles entre ellos.

Para ello se usa la propiedad column-gap. En este caso no tendría sentido usar row-gap, al tratarse de una caja flexible horizontal: solo tiene una fila. Si tuviera desborde, indicado con la propiedad flex-wrap, sí que tendría sentido por la separación de los elementos reubicados en la siguiente fila.

Código HTML:

<div class="caja-flexible">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Código CSS:

.caja-flexible {
  background: teal;
  column-gap: 10px;
  display: flex;
}

.item {
  background: salmon;
  border: 1px solid black;
  color: black;
  width: 20%;
}

Resultado:

1

2

3

4

5

Como se puede ver en este ejemplo, la propiedad column-gap ha aplicado 10 píxeles de separación entre los elementos hijos de la caja flexible. Con márgenes habríamos tenido que aplicar un margen a la derecha de todas las celdas exceptuando la última, o viceversa.

Para conseguir una separación entre la caja contenedora y el resto de elementos es tan fácil como aplicar un relleno de 10 píxeles con la propiedad padding al elemento contenedor. De esta manera:

.caja-flexible {
  background: teal;
  column-gap: 10px;
  display: flex;
  padding: 10px;
}

Dando como resultado:

1

2

3

4

5

Ejemplo con cuadrículas

En el siguiente ejemplo vamos a aplicar una separación entre celdas en un sistema de cuadrículas, por lo que la separación se generará entre las filas y las columnas. El contenedor tiene 6 elementos hijos (ítems) dispuestos mediante áreas. Al igual que en el ejemplo anterior, se separan 10 píxeles entre sí.

Código HTML:

<div class="cuadricula">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
</div>

Código CSS:

.cuadricula {
  background: teal;
  column-gap: 10px;
  display: grid;
  grid-template-rows: 2fr 1fr 4fr 1.5fr;
  grid-template-columns: 50px 1fr  50px;
  grid-template-areas:
    "head head head"
    "menu menu menu"
    "side main form"
    "foot foot foot";
  padding: 10px;
  row-gap: 10px;
}

.item {
  background: salmon;
  border: 1px solid black;
  color: black;
}

.item-1 {
  grid-area: head;
}

.item-2 {
  grid-area: menu;
}

.item-3 {
  grid-area: side;
}

.item-4 {
  grid-area: main;
}

.item-5 {
  grid-area: form;
}

.item-6 {
  grid-area: foot;
}

Resultado:

1

2

3

4

5

6

Hay que tener en cuenta que las columnas caben gracias a que su tamaño se ha indicado mediante unidades fraccionales (fr). De lo contrario, cuando las columnas no caben en el espacio disponible del contenedor se desbordan hasta salirse de la caja. Esto no sucede con las filas.

Ejemplo con columnas

En este ejemplo vamos a definir una separación entre columnas de texto creadas mediante la propiedad column-count, que permite distribuir el texto en múltiples columnas. El contenedor distribuye el texto en 2 columnas.

Código HTML:

<p class="columnas">Este texto se va a dividir en 2 columnas mediante la propiedad <code>column-count</code>. En este caso, la separación de columnas por defecto es de <code>1em</code>, pero le indicamos <code>2em</code> con la intención de que se vea más separado.</p>

Código CSS:

.columnas {
  column-count: 2;
  column-gap: 2em;
}

Este texto se va a dividir en 2 columnas mediante la propiedad column-count. En este caso, la separación de columnas por defecto es de 1em, pero le indicamos 2em con la intención de que se vea más separado.

La propiedad ‘gap’

La propiedad gap es una abreviatura (shorthand) que unifica las propiedades row-gap y column-gap, en ese orden. Por tanto, gap admite un máximo de dos parámetros correspondientes a la separación entre las filas y las columnas. Si se introduce un solo valor se aplicará a las filas y a las columnas.

Esto significa que en los dos ejemplos anteriores, el código CSS se podría haber resumido en una sola propiedad, quedando solo gap: 10px.