Post

For both flexbox and grid, I use a lego bricks metaphor to explain alignment. Here is a demo for align-self and justify-self. Toggle line numbers and grid axes to see exactly what's happening.

One of the examples that explains grid-auto-flow. It either flows in rows or columns. This is columns flow.

In grid, it's important to grasp how grid areas work. This is one of the examples. I really like grid areas and believe mastering them along with named grid lines gives you precise control over any layout.