CSS grid playground. Based on the excellent MDN intro to grids.

Default flexbox

Default grid. Unlike Flexbox, the items don't look any different from the normal flow because the default is a one column grid.

Adding Column Tracks. We can use any length or percentage unit (here 200px).

Use the fr (fraction) unit to create flexibly sized tracks.

fr distributes available space, not all space, so large items will result in less space to share.

We can create gaps between tracks. And we can use the repeat function to repeat tracks.

Columns created so far were explicit, but rows were implicitly created. Such implicit tracks are sized auto by default (large enough to hold their content), but can also be given a size.

Above we picked a size that is not enough to host the contents. We can use the minmax function to specify both a minimum and a maximum size for the track.

Note how the minmaxing applies to the entire track (row in this case). Since we are using auto as the maximum size, the entire track (second row) expands to fit the content.

We can generate as many columns as will fit by passing auto-fit to repeat.

It would be nice to combine this with content aware track size, say minmax(70px, auto), or minmax(70px, max-content). But that doesn't work (try squishing the grid down).

This is because "automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes (min-content, max-content, auto, fit-content())".^†

This illustrates how grid is not a replacement for flexbox, but is more complementary. The content-aware overflow of cells can achieved using flexbox, but notice how the tracks are not the same size. flex and grid just simply have different primitives and cover different design spaces.

Child elements of a grid can overlap. If multiple children are placed in the same grid area, then they'll be laid out layered on top of each other.

The grid area in which a child is placed is set by using its grid-area CSS property, which is a shorthand for grid-row-start / grid-column-start / grid-row-end / grid-column-end. All of these individual properties default to auto. To have a grid with a single row and column, and get all of its children to stack onto the same area, we can give them all the grid-area 1 / 1.

By default, grid items stack in the source order. Here the first child is hidden because the second child has a background color.

But we can bring the first child to the fore by giving it a z-index. Overlapping elements with a larger z-index cover those with a smaller one (default z-index can be thought of as 0 (sort-of), so use positive integers to stack things on top of the default stacking context).