What are some examples of CSS Grid layouts?

What are some examples of CSS Grid layouts?

CSS Grid is a powerful layout system in CSS. Here are a few examples:

1. Two-Column Layout: A simple layout with a sidebar and main content area.
2. Image Gallery: A responsive grid for displaying images.
3. Dashboard Layout: A complex layout with various widgets arranged in a grid. Would you like to see code snippets for any of these?

Yes, can you show me the code for the two-column layout?

Sure! Here's a basic example of a two-column layout using CSS Grid:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}
.sidebar {
  background-color: #f4f4f4;
}
.main {
  background-color: #fff;
}

<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
</div>

This will create a layout with a sidebar on the left and main content on the right.

That looks great! How can I make it responsive?

To make it responsive, you can use media queries. Here's an updated version:

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 600px) {
  .container {
    grid-template-columns: 1fr 3fr;
  }
}

This way, on smaller screens, it will stack the columns, and on larger screens, it will display them side by side.

Thanks! Can you give me more examples of grid layouts?

Of course! Here are a few more examples:

1. Three-Column Layout: Perfect for blogs or news sites.
2. Asymmetrical Layout: For a more creative design.
3. Card Layout: Great for displaying products or articles. Let me know if you want code for any of these!