What are some practical examples of using CSS Grid?

What are some practical examples of using CSS Grid?

CSS Grid is a powerful layout system. Here are a few examples: 1. Creating a responsive photo gallery. 2. Building a complex web layout with headers, footers, and sidebars. 3. Designing a dashboard with various widgets.

Can you show me how to create a simple two-column layout?

Sure! Here's a basic example:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

This will create two equal columns with a gap between them.

What about a layout with a header, footer, and main content area?

You can achieve that with:

.container {
  display: grid;
  grid-template-areas:
    'header header'
    'main sidebar'
    'footer footer';
  grid-template-columns: 3fr 1fr;
}

This defines areas for the header, main content, sidebar, and footer.

Are there any resources to learn more about CSS Grid?

Absolutely! Check out the CSS Tricks guide on CSS Grid, MDN Web Docs, and the official W3C specification for in-depth learning.