Box alignment align-items Box alignment align-self

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

I’m using the justify-items property with a value of center. This centers the content of all of the grid items.

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, auto);
    align-items: center;
    }
[fl_row] .a {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    }
[fl_row] .b {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
    }
[fl_row] .c {
    grid-column: 1 / 3;
    grid-row: 3 / 6;
    }
[fl_row] .d {
    grid-column: 3 / 5;
    grid-row: 3 / 6;
}
[fl_row] .e {
    grid-column: 5 / 7;
    grid-row: 1 / 6;
    align-self: stretch;
}

This is box A.

This is box B.

This is box C.

This is box D.

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 justify-items property is used to justify the content inside each grid-area.

Other values of align-items are:

  • stretch
  • start
  • end
  • center