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 justify-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; justify-self: stretch; } [fl_row] .b { grid-column: 3 / 5; grid-row: 1 / 3; justify-self: end; } [fl_row] .c { grid-column: 1 / 3; grid-row: 3 / 6; justify-self: start; } [fl_row] .d { grid-column: 3 / 5; grid-row: 3 / 6; justify-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.