What is CSS Grid and how can I use it?

What is CSS Grid and how can I use it?

CSS Grid is a layout system in CSS that allows you to create complex web layouts easily. It uses a grid-based approach.

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

Sure! You can create a simple grid layout using the following CSS:

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

What does 'repeat(3, 1fr)' mean in that example?

'repeat(3, 1fr)' means that the grid will have 3 equal columns. '1fr' stands for one fraction of the available space.

How do I make the grid responsive?

You can use media queries to adjust the grid layout for different screen sizes. For example:

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