Grid by Example

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

A grid item as a new positioning context

You can absolutely position items inside an area of the Grid. In this example I have used position: relative on my .content Grid Area. I can then position the four arrow images using absolute positioning inside that area, and it works as you would expect.

Read the specification | View example as full page

See the Pen Grid by Example 16: Grid Area as a new positioning context by rachelandrew (@rachelandrew) on CodePen.

Back to list of examples