Mandala   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +{ { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }      ../../    ../../    ../../    ../../    ../../    ../../    ../../ <></><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </>

The CSS justify-self Property

This reference demonstrates the CSS justify-self property and its ability to justify content within an alignment container along an axis.

Examples using the different values of the justify-self property are included, such as start, end, and center.

Syntax

justify-self: auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right

Basic Keywords

/* Basic keywords */
justify-self: auto;
justify-self: normal;
justify-self: stretch;

Positional alignment

/* Positional alignment */
justify-self: center;        /* Pack item around the center */
justify-self: start;         /* Pack item from the start */
justify-self: end;           /* Pack item from the end */

justify-self: flex-start;    /* Equivalent to 'start'. Note that justify-self is ignored in Flexbox layouts. */
justify-self: flex-end;      /* Equivalent to 'end'. Note that justify-self is ignored in Flexbox layouts. */
justify-self: self-start;
justify-self: self-end;
justify-self: left;          /* Pack item from the left */
justify-self: right;         /* Pack item from the right */

Baseline alignment

/* Baseline alignment */
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;

Overflow alignment

/* Overflow alignment (for positional alignment only) */
justify-self: safe center;
justify-self: unsafe center;

Global values

/* Global values */
justify-self: inherit;
justify-self: initial;
justify-self: revert;
justify-self: revert-layer;
justify-self: unset;

Value Definitions

centerThe CSS justify-self property with the center value packs the item in the middle of the alignment container.
startThe CSS justify-self property with the start value packs the element at the alignment container’s start.
endThe CSS justify-self property with an end value packs the element at the alignment container’s end.

Usage

You can apply the justify-self property to any element by using CSS selectors.

#element-id {
  justify-self: center;
}

.element-class {
  justify-self: start;
}

Try It

How to Use CSS Justify-Self Center Property
How to Use CSS Justify-Self Center Property

The design above has one column and three rows, but the CSS properties indicate a nine-by-nine grid template. You can see the three columns being defined with the grid-template-columns property.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  width: auto;
  grid-gap: 5px;
}

Then when you look at the HTML, you can see three rows.

<div class="grid-container">
  <div class="header">Header</div>
  <div class="form">Form</div>
  <div class="footer">Footer</div>
</div>

The grid-column property below tells the grid to position the form row at column one and to span three columns because the value of grid-column is 1 / span 3.

grid-column: 1 / span 3;
.form {
  grid-row: 2;
  grid-column: 1 / span 3;
  background-color: #14906a;
  padding: 20px;
  font-size: 30px;
  width: 50%;
  height: 505px;
  justify-self: center;
  border-radius: 5px;
}

So how are we centering the form row? That’s where the justify-self property comes in! We first set a width on the row, which is set to a width of 50%. Next, we then use justify-self to center the row within the columns.

width: 50%;
justify-self: center;

This code is pretty simple; it makes the row 50% of its full width and then instructs the browser to center the row within the three-column span.

Not only can we center the row within the three-column span, but we can make it start at the beginning by using the start value.

justify-self: start;

How To Use CSS Justify-Self Start Property
How To Use CSS Justify-Self Start Property

Addionally, we can also change the value to end like justify-self: end; which places the row at the end of the span.

justify-self: end;

How To Use CSS Justify-Self End Property
How To Use CSS Justify-Self End Property

Wrapping up

The property justify-self is used to align or position items along the horizontal axis within a grid, ideally along a row. It accepts four values; start, center, end, and stretch.

If you wish to test the code for this grid layout, check it out here on codepen.io

Specifications

W3C CSS Box Alignment Module Level 3
#propdef-justify-self

Recommended Articles