What are CSS Grid Layouts and how do I use them?

What are CSS Grid Layouts and how do I use them?

CSS Grid Layouts are a powerful layout system in CSS that allows you to create complex web layouts easily. You can define rows and columns, and place items within this grid.

Can you give me a simple example of a CSS Grid?

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 grid with three equal columns.

How do I make a responsive grid?

To make a responsive grid, you can use media queries to adjust the grid-template-columns based on the screen size. For example:

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

What are some common use cases for CSS Grid?

Common use cases include creating complex web layouts, aligning items in a dashboard, and building responsive designs that adapt to different screen sizes.