How can I use CSS Grid for responsive design?

How can I use CSS Grid for responsive design?

CSS Grid is a powerful layout system that allows you to create complex responsive designs easily. You can define rows and columns, and place items within them.

Can you give me an example of a simple grid layout?

Sure! Here's a basic example:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.item {
  background-color: lightblue;
  padding: 20px;
}

This creates a three-column layout with equal width.

How do I make it responsive for mobile devices?

You can use media queries to adjust the grid layout for smaller screens. For example:

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

This will stack the items in a single column on screens smaller than 600px.

What are some common pitfalls when using CSS Grid?

Common pitfalls include not accounting for browser compatibility, overcomplicating the grid structure, and forgetting to set explicit sizes for grid items.