Place Content

    Utilities for controlling how content is justified and aligned at the same time.

    Use to pack items in the center of the block axis:

    Start

    Use place-content-start to pack items against the start of the block axis:

    Place Content - 图2

    1. <div class="grid grid-cols-2 gap-4 place-content-start h-48 ...">
    2.   <div>02</div>
    3.   <div>03</div>
    4.   <div>04</div>
    5. </div>

    End

    1. <div class="grid grid-cols-2 gap-4 place-content-end h-48 ...">
    2.   <div>01</div>
    3.   <div>02</div>
    4.   <div>03</div>
    6. </div>

    Use place-content-between to distribute grid items along the block axis so that that there is an equal amount of space between each row on the block axis.

    Place Content - 图4

    Space around

    Use place-content-around distribute grid items such that there is an equal amount of space around each row on the block axis:

    1. <div class="grid grid-cols-2 gap-4 place-content-around h-48 ...">
    2.   <div>01</div>
    3.   <div>02</div>
    4.   <div>04</div>
    5. </div>

    Space evenly

    Place Content - 图6

    1. <div class="grid grid-cols-2 gap-4 place-content-evenly h-48 ...">
    2.   <div>01</div>
    4.   <div>03</div>
    5.   <div>04</div>
    6. </div>

    Use place-content-stretch to stretch grid items along their grid areas on the block axis:

    Hover, focus, and other states

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

    1. <div class="grid place-content-start hover:place-content-center">
    2.   <!-- ... -->
    3. </div>

    For a complete list of all available state modifiers, check out the documentation.

    Breakpoints and media queries

    1. <div class="grid place-content-start md:place-content-center">

    To learn more, check out the documentation on , Dark Mode and .