justify-items

Controlling how items are aligned along its inline axis.

Overview

Examples

Align grid items inline

Use justify-items:* to set the default inline-axis alignment for children in a grid container.

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

@layer utilities {    .grid {        display: grid    }    .justify-items\:center {        justify-items: center    }}

Stretch items by default

Use justify-items:stretch when grid children should fill their grid areas inline.

<section class="grid justify-items:stretch">...</section>

Use justify-self when only one grid item needs different alignment.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="justify-items:stretch justify-items:center@sm justify-items:stretch@print">...</div>

For flexbox main-axis distribution, use justify-content instead.