Justify Self

Utilities for controlling how an individual grid item is aligned along its inline axis.

Default class reference

Auto

Use justify-self-auto to align an item based on the value of the grid’s justify-items property:

1. <div class="grid justify-items-stretch ...">
2. <!-- ... -->
3. <div class="justify-self-auto ...">1</div>
4. <!-- ... -->
5. <!-- ... -->
6. <!-- ... -->
7. <!-- ... -->
8. </div>

Start

Use justify-self-start to align a grid item to the start its inline axis:

1. <div class="grid justify-items-stretch ...">
2. <!-- ... -->
3. <div class="justify-self-start ...">1</div>
4. <!-- ... -->
5. <!-- ... -->
6. <!-- ... -->
7. <!-- ... -->
8. </div>

Center

Use justify-self-center to align a grid item along the center its inline axis:

1. <div class="grid justify-items-stretch ...">
2. <!-- ... -->
3. <div class="justify-self-center ...">1</div>
4. <!-- ... -->
5. <!-- ... -->
6. <!-- ... -->
7. <!-- ... -->
8. </div>

End

Use justify-self-end to align a grid item to the end its inline axis:

1. <div class="grid justify-items-stretch ...">
2. <!-- ... -->
3. <div class="justify-self-end ...">1</div>
4. <!-- ... -->
5. <!-- ... -->
6. <!-- ... -->
7. <!-- ... -->
8. </div>

Stretch

Use justify-self-stretch to stretch a grid item to fill the grid area on its inline axis:

1. <div class="grid justify-items-start ...">
2. <!-- ... -->
3. <div class="justify-self-stretch ...">1</div>
4. <!-- ... -->
5. <!-- ... -->
6. <!-- ... -->
7. <!-- ... -->
8. </div>

Responsive

To control the alignment of a grid item inside its grid area at a specific breakpoint, add a {screen}: prefix to any existing utility class. For example, use md:justify-self-end to apply the justify-self-end utility at only medium screen sizes and above.

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Customizing

Variants

By default, only responsive variants are generated for justify-self utilities.

You can control which variants are generated for the justify-self utilities by modifying the justifySelf property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

1. // tailwind.config.js
2. module.exports = {
3. variants: {
4. extend: {
5. // ...
6. +       justifySelf: ['hover', 'focus'],
7. }
8. }
9. }

Disabling

If you don’t plan to use the justify-self utilities in your project, you can disable them entirely by setting the justifySelf property to false in the corePlugins section of your config file:

1. // tailwind.config.js
2. module.exports = {
3. corePlugins: {
4. // ...
5. +     justifySelf: false,
6. }
7. }

←Justify Items Align Content→

Edit this page on GitHub