What are the differences between Grid and Flexbox in CSS?

What are the differences between Grid and Flexbox in CSS?

Grid and Flexbox are both CSS layout models. Grid is two-dimensional, allowing for both rows and columns, while Flexbox is one-dimensional, focusing on either rows or columns.

Can you give me an example of when to use Grid over Flexbox?

Sure! Use Grid when you need to create complex layouts with overlapping elements, like a photo gallery. Flexbox is better for simpler layouts, like a navigation bar.

What about a practical example of using Flexbox?

A practical example of Flexbox is a responsive card layout where cards adjust their size and position based on the screen width.

Can you show me a code snippet for a Grid layout?

Absolutely! Here's a simple Grid layout:

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