Flexbox 與 Grid

項目對齊方式justify-items

Controlling how items are aligned along its inline axis.

Examples

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

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

Generated CSS

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

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 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.

Controlling how items are aligned along its main axis.

Controlling how an individual item is aligned along its inline axis.