How to Use The CSS Justify-Self Property

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.

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

Recommended Articles

Comments

Tip: Thoughtful and well written comments are voted up more often.
0 Comments

No Comments.