Grid by Example

Everything you need to learn CSS Grid Layout

Box alignment justify-items

I have used a grid background image to show the grid in this example. I’ve defined 4 equal sized grid areas on the left which cover a square area inside three row and column lines.

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

Read the specification | View example as full page

See the Pen Grid by Example 25: justify-items by rachelandrew (@rachelandrew) on CodePen.