CSS: Ordenación

Una de las cosas más interesantes cuando se trabaja con el método de diseño de cajas flexibles (flex) o con el sistema de cuadrículas (grid) es la capacidad de alterar el orden de sus elementos hijos (ítems) sin tener que modificar la estructura HTML. Esta funcionalidad se realiza con la propiedad CSS order.

El funcionamiento de esta propiedad es bastante simple. Como parámetro admite un número entero, que puede ser tanto positivo como negativo. Por defecto, todos los elementos de un contenedor flex o grid es equivalente a 0. Si se indica un valor diferente sobre un elemento, se reubicará donde le corresponda.

En esencia, es como asignar un peso. Cuanto más alto es el número, más “pesa” el elemento, por lo que se desplaza posiciones hacia la derecha o hacia abajo, dependiendo de la dirección que le toque. Y cuanto menos pesa, se desplaza posiciones hacia la izquierda o hacia arriba. Su uso es intuitivo.

Como es obvio, en caso de que los elementos hijos (ítems) no tenga un número de ordenación especificado, seguirán el orden de la estructura HTML. Todos los elementos parten del mismo valor predeterminado.

En ocasiones puede ser necesario aplicar un valor a todos los elementos para conseguir la posición deseada. Esto ocurre debido a que el valor 1 es mayor que 0, y el ítem se ubicará al final, saltándose la posiciones intermedias. Lo mismo ocurre con el valor -1, saltando a la primera posición.

La propiedad order aplica directamente sobre los elementos hijos (ítems) que estén dentro de una caja flexible o una cuadrícula.

Ejemplo con cajas flexibles

Vamos a crear un ejemplo utilizando el método de diseño de cajas flexibles (flex). Se crea una caja contenedora con 5 elementos hijos (ítems), que están numerados del 1 al 5. Se va a indicar un valor de la propiedad order a todos los elementos para poder ubicarlos en posiciones intermedias.

Código CSS:

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

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

.item-1 {
  order: 4;
}

.item-2 {
  order: 3;
}

.item-3 {
  order: 5;
}

.item-4 {
  order: 1;
}

.item-5 {
  order: 2;
}

Código HTML:

<div class="caja-flexible">
  <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>

Resultado:

1

2

3

4

5

Tal y como se puede ver en este ejemplo, los elementos hijos (ítems) de la caja flexible no siguen el orden establecido en la estructura HTML.

Ejemplo con cuadrículas

Vamos a crear un nuevo ejemplo, esta vez usando el método de diseño de cuadrículas (grid). Se crea una caja contenedora con 6 elementos hijos (ítems) que se distribuyen en 2 filas y 3 columnas. Al igual que en el ejemplo anterior, se indica un valor de la propiedad order a todos los elementos.

Cuando se usa las propiedades grid-template-areas y grid-area para distribuir las celdas de la cuadrícula, la propiedad order no funciona. Las áreas ya poseen su método de posicionamiento.

Código CSS:

.cuadricula {
  background: teal;
  display: grid;
  gap: 10px;
  grid-template-rows: 1fr 3fr;
  grid-template-columns: 50px 1fr  50px;
  padding: 10px;
}

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

.item-1 {
  order: 4;
}

.item-2 {
  order: 1;
}

.item-3 {
  order: 6;
}

.item-4 {
  order: 2;
}

.item-5 {
  order: 3;
}

.item-6 {
  order: 5;
}

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>

Resultado:

1

2

3

4

5

6

En este ejemplo se puede observar que los ítems de la cuadrícula tampoco siguen el orden establecido en la estructura HTML.