How can I use CSS Grid for responsive layouts?

How can I use CSS Grid for responsive layouts?

CSS Grid is a powerful layout system in CSS that allows you to create complex responsive layouts 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;
  text-align: center;
}

This creates a grid with three equal columns.

How do I make it responsive for smaller screens?

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 defining a proper grid structure, forgetting to use the fr unit for flexible layouts, and not testing on various screen sizes.