justify-items

Ejemplos

Inicio (Start)

Utiliza la utilidad justify-items-start para alinear los elementos de la cuadrícula contra el inicio de su eje en línea:

<div class="grid justify-items-start ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div>  <div>05</div>  <div>06</div></div>

Fin (End)

Utiliza las utilidades justify-items-end o justify-items-end-safe para alinear los elementos de la cuadrícula contra el final de su eje en línea:

<div class="grid grid-flow-col justify-items-end ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

<div class="grid grid-flow-col justify-items-end-safe ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Cuando no haya suficiente espacio disponible, la utilidad justify-items-end-safe alineará los elementos al inicio del contenedor en lugar de al final.

Centrado (Center)

Utiliza las utilidades justify-items-center o justify-items-center-safe para alinear los elementos de la cuadrícula contra el centro de su eje en línea:

<div class="grid grid-flow-col justify-items-center ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

<div class="grid grid-flow-col justify-items-center-safe ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Cuando no haya suficiente espacio disponible, la utilidad justify-items-center-safe alineará los elementos al inicio del contenedor en lugar de al centro.

Estirar (Stretch)

Utiliza la utilidad justify-items-stretch para estirar los elementos a lo largo de su eje en línea:

<div class="grid justify-items-stretch ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div>  <div>05</div>  <div>06</div></div>

Diseño responsivo

Antepone a la utilidad justify-items el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<div class="grid justify-items-start md:justify-items-center ...">  <!-- ... --></div>

Obtén más información sobre el uso de variantes en la documentación de variantes.