Display

Ejemplos de display CSS.

Lee los comentarios

No olvides revisar los comentarios /* como este */ para entender cómo modificar el estilo.

Display Flex

Display Flex Preview

1

2

row

3

4

HTML

flex.html

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <!-- ... -->
</div>

CSS

style.css

.flex {
  display: flex;
  flex-direction: column; /* `row` (horizontal) o `column` (vertical) */
  justify-content: space-evenly; /* Alinea en el eje de flex-direction */
  align-items: center; /* Alinea en el eje contrario al flex-direction */
  gap: 0.5rem;
  padding: 0.5rem;

  /* Estilos de ejemplo */
  border: 2px dashed #111;
  > * {
    background-image: radial-gradient(in oklch ellipse at top left, #540101, #ff0000, #e62955);
    border-radius: 0.25rem;
    aspect-ratio: 1;
    width: 4rem;
    color: #fff;
  }
}

justify_content

justify-content-syntax.css

.flex {
  /* Positional alignment */
  justify-content: center;
  justify-content: start;
  justify-content: end;
  justify-content: flex-start;
  justify-content: flex-end;
  justify-content: left;
  justify-content: right;

  /* Normal alignment */
  justify-content: normal;

  /* Distributed alignment */
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
  justify-content: stretch;

  /* Overflow alignment */
  justify-content: safe center;
  justify-content: unsafe center;

  /* Global values */
  justify-content: inherit;
  justify-content: initial;
  justify-content: revert;
  justify-content: revert-layer;
  justify-content: unset;
}

align_items

align-items-syntax.css

.flex {
  /* Basic keywords */
  align-items: normal;
  align-items: stretch;

  /* Positional alignment */
  /* align-items does not take left and right values */
  align-items: center;
  align-items: start;
  align-items: end;
  align-items: flex-start;
  align-items: flex-end;
  align-items: self-start;
  align-items: self-end;
  align-items: anchor-center;

  /* Baseline alignment */
  align-items: baseline;
  align-items: first baseline;
  align-items: last baseline; /* Overflow alignment (for positional alignment only) */
  align-items: safe center;
  align-items: unsafe center;

  /* Global values */
  align-items: inherit;
  align-items: initial;
  align-items: revert;
  align-items: revert-layer;
  align-items: unset;
}

justify-content y align-items

• justify-content define cómo se distribuye el espacio entre los elementos de contenido y alrededor de ellos a lo largo del eje principal (main-axis) de un contenedor flexbox.

• align-items establece el valor align-self en todos los elementos secundarios directos como un grupo. En flexbox, controla la alineación de los elementos en el eje transversal (cross-axis).

• main-axis en flexbox está definido por la dirección establecida por la propiedad flex-direction. Si es row o row-reverse, el eje principal es horizontal. Si es column o column-reverse, es vertical.

• cross-axis en flexbox corre perpendicular al main-axis, por lo tanto, si su flex-direction es row o row-reverse, entonces el cross-axis corre por las columnas en horizontal.

---

Masonry

Masonry

Este layout simula un diseño tipo ‘masonry’ usando columnas y márgenes. A diferencia de grid, no garantiza alineación precisa en todos los casos.

Display Masonry Preview

HTML

masonry.html

<div class="masonry">
  <img src="./poster-1.webp" />
  <img src="./poster-2.webp" />
  <img src="./poster-3.webp" />
  <img src="./poster-4.webp" />
  <img src="./poster-5.webp" />
  <img src="./poster-6.webp" />
  <img src="./poster-7.webp" />
  <img src="./poster-8.webp" />
  <img src="./poster-9.webp" />
  <!-- ... -->
</div>

CSS

style.css

.masonry {
  --gap: clamp(0.25rem, 1vw, 1.5rem); /* Espaciado entre columnas */
  columns: 14rem auto; /* Número de columnas ajustable, con un mínimo de 14rem por columna */
  column-width: 14rem; /* ancho de las columnas */
  column-count: 6; /* Número mínimo de columnas */
  gap: var(--gap);

  > * {
    width: 100%;
    break-inside: avoid; /* impide que los elementos se "rompan" y se distribuyan entre dos columnas. */
    margin-bottom: var(--gap);
  }

  /* Estilos de ejemplo */
  /* Eliminame para no afectar tu diseño */
  > * {
    background: linear-gradient(in oklch to bottom, #06b6d4, #2563eb, #6366f1);
    aspect-ratio: var(--r);
  }
  :nth-child(1){--r:2;}  :nth-child(2){--r:1;}  :nth-child(3){--r:3;}
  :nth-child(4){--r:3/5;}:nth-child(5){--r:5/4;}:nth-child(6){--r:7/9;}
  :nth-child(7){--r:1;}  :nth-child(8){--r:4/3;}:nth-child(9){--r:1/2;}
}

---

Display Grid

Display Grid Preview

HTML

grid.html

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <!-- ... -->
</div>

CSS

style.css

.grid {
  display: grid; /* Usa grid para la disposición de los elementos */
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); /* Columnas flexibles con un ancho mínimo de 14rem */
  gap: 0.5rem; /* Espaciado entre los elementos */

  /* Estilos de ejemplo para los items */
  > * {
    background: conic-gradient(in oklch at top left, #fdff8c, #dc4e26, #dc2626);
    border-radius: 0.25rem;
    height: 12rem;
  }
}

Fin.