Visual Design

This is the most human-readable way to create layouts. You literally draw the site structure with words.

Steps:

1. Assign names to elements via grid-area.
2. Describe the scheme in parent via grid-template-areas.

.nav    { grid-area: menu; }
.header { grid-area: head; }
.main   { grid-area: body; }

.container {
  display: grid;
  grid-template-areas: 
    "head head head"
    "menu body body"
    "menu body body";
}