CSS Grid Areas

 CSS Grid Areas

CSS Grid allows you to create grid-based layouts by defining areas within the grid. Here's an example:

.container {

  display: grid;

  grid-template-areas:

    "header header"

    "sidebar content"

    "footer footer";

  grid-template-rows: auto 1fr auto;

  grid-template-columns: 200px 1fr;

  grid-gap: 10px;

}

.header {

  grid-area: header;

}

.sidebar {

  grid-area: sidebar;

}

.content {

  grid-area: content;

}

.footer {

  grid-area: footer;

}