How can I effectively use CSS Grid and media queries in my web design?

How can I effectively use CSS Grid and media queries in my web design?

CSS Grid is a powerful layout system that allows you to create complex web designs easily. You can define rows and columns, and place items within them. Media queries help you make your design responsive by applying different styles based on the viewport size.

Can you give me an example of a simple CSS 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;
  text-align: center;
}

This creates a grid with three equal columns.

How do I add media queries to make it responsive?

You can add media queries like this:

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

This will change the layout to a single column when the viewport is 600px or smaller.

What are some common pitfalls when using CSS Grid?

Common pitfalls include not defining grid areas properly, forgetting to set a fallback for older browsers, and overcomplicating the grid structure. Always test your layout on different screen sizes!