Layout Models Development Tutorials, Guides & Insights

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

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

• Grid lines: Used to place items within the grid.
• Grid tracks: Rows or columns in the grid.