<main>

A 2 Column CSS Grid Layout

Layout uses CSS grid-column and grid-row properties for positioning of header, nav, main, aside and footer HTML elements.

Media query breakpoint at 768px to collapse from 2 columns to 1.

Nested grid below uses grid-template-columns property with repeat value. Container queries used to adjust grid column width. JavaScript used to populate the nested grid with placeholder images.