place-items

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página

Examples#
Start#
End#
Center#
Stretch#
Responsive design#

Clase	Propiedades CSS
`place-items-start`	`place-items: start;`
`place-items-end`	`place-items: end;`
`place-items-end-safe`	`place-items: safe end;`
`place-items-center`	`place-items: center;`
`place-items-center-safe`	`place-items: safe center;`
`place-items-baseline`	`place-items: baseline;`
`place-items-stretch`	`place-items: stretch;`

Examples#

Start#

Use place-items-start to place grid items on the start of their grid areas on both axes:

{

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4">
        01
      </div>
    </div>
    <div className="grid grid-cols-1">

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4">
        02
      </div>
    </div>
    <div className="grid grid-cols-1">

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4">
        03
      </div>
    </div>
    <div className="grid grid-cols-1">

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4">
        04
      </div>
    </div>
    <div className="grid grid-cols-1">

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4">
        05
      </div>
    </div>
    <div className="grid grid-cols-1">

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4">
        06
      </div>
    </div>
  </div>
</div>

}

<!-- [!code classes:place-items-start] -->
<div class="grid grid-cols-3 place-items-start gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

End#

Use place-items-end to place grid items on the end of their grid areas on both axes:

{

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4">
        01
      </div>
    </div>
    <div className="grid grid-cols-1">

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4">
        02
      </div>
    </div>
    <div className="grid grid-cols-1">

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4">
        03
      </div>
    </div>
    <div className="grid grid-cols-1">

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4">
        04
      </div>
    </div>
    <div className="grid grid-cols-1">

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4">
        05
      </div>
    </div>
    <div className="grid grid-cols-1">

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4">
        06
      </div>
    </div>
  </div>
</div>

}

<!-- [!code classes:place-items-end] -->
<div class="grid h-56 grid-cols-3 place-items-end gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

Center#

Use place-items-center to place grid items on the center of their grid areas on both axes:

{

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4">
        01
      </div>
    </div>
    <div className="grid grid-cols-1">

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4">
        02
      </div>
    </div>
    <div className="grid grid-cols-1">

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4">
        03
      </div>
    </div>
    <div className="grid grid-cols-1">

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4">
        04
      </div>
    </div>
    <div className="grid grid-cols-1">

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4">
        05
      </div>
    </div>
    <div className="grid grid-cols-1">

      <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4">
        06
      </div>
    </div>
  </div>
</div>

}

<!-- [!code classes:place-items-center] -->
<div class="grid h-56 grid-cols-3 place-items-center gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

Stretch#

Use place-items-stretch to stretch items along their grid areas on both axes:

{

  <div className="col-start-1 row-start-1 grid h-56 grid-cols-3 gap-4 font-mono text-sm leading-6 font-bold text-white">
    <div className="grid place-items-stretch">
      <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">01</div>
    </div>
    <div className="grid place-items-stretch">
      <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">02</div>
    </div>
    <div className="grid place-items-stretch">
      <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">03</div>
    </div>
    <div className="grid place-items-stretch">
      <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">04</div>
    </div>
    <div className="grid place-items-stretch">
      <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">05</div>
    </div>
    <div className="grid place-items-stretch">
      <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">06</div>
    </div>
  </div>
</div>

}

<!-- [!code classes:place-items-stretch] -->
<div class="grid h-56 grid-cols-3 place-items-stretch gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>