How can I create a complex layout using CSS Grid?

How can I create a complex layout using CSS Grid?

You can create complex layouts by using grid-template-areas, grid-template-columns, and grid-template-rows. Would you like an example?

Yes, please provide an example of a layout with a header, sidebar, main content area, and footer.

Sure! Here's a simple example:

.container {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

This will create a layout with a header spanning the top, a sidebar on the left, and a main content area.

How do I make the sidebar responsive?

You can use media queries to adjust the grid layout for different screen sizes. For example:

@media (max-width: 600px) {
  .container {
    grid-template-areas:
      'header'
      'main'
      'sidebar'
      'footer';
    grid-template-columns: 1fr;
  }
}