How can I use CSS Grid with media queries for responsive design?

How can I use CSS Grid with media queries for responsive design?

You can use CSS Grid to create flexible layouts and media queries to adjust those layouts for different screen sizes. For example, you can define a grid layout for larger screens and then change the grid template areas or columns in your media queries for smaller screens.

Can you show me a simple example of that?

Sure! Here's a basic example:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

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

In this example, the grid has three columns on larger screens, but switches to a single column on screens smaller than 600px.

What if I want to change the order of items in the grid?

You can change the order of grid items using the order property. For example:

.item1 { order: 2; }
.item2 { order: 1; }
.item3 { order: 3; }

This will rearrange the items in the grid according to the specified order.

Are there any browser compatibility issues I should be aware of?

CSS Grid is well-supported in modern browsers, but you should check compatibility for older versions. Using feature queries can help you provide fallbacks for unsupported browsers.