Grid Areas

Grid Areas are the most important element to grid. It allows you to name cells, then assign elements to those cells. The default allocation in grid is to assign an element to the first available cell. This is not the most powerful system and can be very frustrating. Grid Areas gives you back the power.

The syntax with Grid Areas is a little strange. Each new line and parenthesis represents a different row in the grid.

.gridContainer {
  grid-template-areas:
  'header header'
  'sidebar main'
  'footer footer'
;

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}