What are some examples of CSS Grid layouts?

What are some examples of CSS Grid layouts?

CSS Grid is a powerful layout system in CSS. Here are a few examples:

1. Two-Column Layout: A simple layout with a sidebar and main content area.
2. Gallery Layout: A responsive grid for displaying images.
3. Dashboard Layout: A complex layout with various widgets arranged in a grid. Would you like to see code snippets for any of these?

Yes, can you show me the code for the gallery layout?

Sure! Here's a basic example of a CSS Grid gallery layout:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
}

And the HTML would look like this:

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

This will create a responsive gallery that adjusts the number of columns based on the screen size.

That looks great! How can I add some spacing between the images?

You can add spacing between the images by adjusting the gap property in the CSS. For example, if you want to add 20px of spacing, you can modify the .gallery class like this:

gap: 20px;

This will increase the space between the images in your gallery.

Thanks for the help! Are there any resources for learning more about CSS Grid?

Absolutely! Here are a few resources:

1. MDN Web Docs: Comprehensive documentation on CSS Grid.
2. CSS-Tricks: A great guide with examples and explanations.
3. Grid Garden: An interactive game to learn CSS Grid. These should help you deepen your understanding!