Place Items

    Utilities for controlling how items are justified and aligned at the same time.

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

    End

    Place Items - 图2

    1. <div class="grid grid-cols-3 gap-4 place-items-end h-56 ...">
    2.   <div>01</div>
    3.   <div>02</div>
    4.   <div>03</div>
    5.   <div>04</div>
    6.   <div>05</div>
    7.   <div>06</div>

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

    Stretch

    Place Items - 图4

    1.   <div>01</div>
    2.   <div>02</div>
    3.   <div>03</div>
    4.   <div>04</div>
    5.   <div>05</div>
    7. </div>

    Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:place-items-center to only apply the place-items-center utility on hover.

    For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

    Breakpoints and media queries

    1. <div class="grid place-items-start md:place-items-center">
    2. </div>

    To learn more, check out the documentation on Responsive Design, and other media query modifiers.