CSS Grid Masterclass Simulator

Target Layout

Recreate this layout using CSS Grid on the Preview Panel:

Header (1)
Sidebar (2)
Main Content (3)
Footer 1 (4)
Footer 2 (5)
Footer 3 (6)

Your CSS Grid Code

Apply styles to #preview-area and its children (.grid-item-N):

Enter your CSS and click "Apply" to see the result and check your solution.

Live Preview

Your CSS will be applied here:

1
2
3
4
5
6