CSS grid - line based positioning and z-index
Hello,
Today I wanted to share an example of CSS grid line based positioning.
1. In our example we have three column grid where we declare three columns and rows are created automatically as we place items on the grid
using line-based positioning.
2. We use shorthand grid-column and grid-row properties where line number before forward slash represent initial position and line number after
forward slash represent end position to span our grid item. We can use Firefox grid inspector to view our grid items.
3.Because different grid items can share same cells, we can create designs with overlapping content and use z-index to manipulate grid item stack order.