Box alignment justify-items Box alignment justify-self

I’ve defined 4 grid areas on the left which cover an area inside three row and column lines.

I’m using the align-self property on individual grid items to demonstrate the different values.

Credit to gridbyexample.com for inspiring this example.

[fl_row] {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat( 4, 150px);
}
[fl_row] .a {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    align-self: stretch;
}
[fl_row] .b {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
    align-self: end;
}
[fl_row] .c {
    grid-column: 1 / 3;
    grid-row: 3 / 6;
    align-self: start;
}
[fl_row] .d {
    grid-column: 3 / 5;
    grid-row: 3 / 6;
    align-self: center;
}
[fl_row] .e {
    grid-column: 5 / 7;
    grid-row: 1 / 6;
    align-self: stretch;
}

This is box A.

align-self: stretch;

This is box B.

align-self: end;

This is box C.

align-self: start;

This is box D.

align-self: center;

Each of the boxes on the left has a grid area of 3 columns and 3 rows (we're counting the gutter col/row).

The align-self property is used to align the content inside the grid-area.