Css Programming Tutorials, Guides & Best Practices

.grid-container {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar content'
    'footer footer';
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

In this example, we define a layout with a header, sidebar, content area, and footer using named grid areas. This approach makes the CSS more intuitive and easier to understand.