How can I create a responsive layout using CSS Grid?

How can I create a responsive layout using CSS Grid?

You can create a responsive layout using CSS Grid by defining a grid container and using grid-template-columns to set the layout. For example, you can use grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); to create a flexible grid that adjusts based on the screen size.

What are some common properties I should use with CSS Grid?

Common properties include grid-template-rows, grid-template-columns, grid-area, and grid-gap. These help you define the structure and spacing of your grid.

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

Sure! Here's a simple 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 a gap between items.

How do I make the grid items stack on 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.