Grid by Example

A collection of usage examples for the CSS Grid Layout specification.

Day 20: Stacking Grid Items and z-index

Dec 20, 2016

If grid items are being placed by auto-placement then they will be placed into empty cells on the grid, and not overlap each other. However you can position grid items into the same grid cells or allow them to overlap. Overlapping items can be controlled in terms of their stacking order using z-index.

I demonstrate in this video from my video tutorial series.

What is this?

I’m sharing some tips to help you learn Grid Layout from the 1st of December until Christmas. Edited highlights from the things on this site and that I’ve posted elsewhere. Follow along!

If you find this style of learning useful then you might enjoy my online CSS Layout Workshop. I’m also available for in-house training, workshops and consultancy or conference speaking.

Back to Blog listing