Grid Layout Examples

CSS Grid is a powerful tool for creating a variety of layouts. In this section, we explore several real-world examples, including a responsive blog layout, a product gallery, and a dashboard interface, along with additional examples for further inspiration.

Responsive Blog Layout

Creating a responsive blog layout using CSS Grid ensures that your content is well-structured and adapts to different screen sizes.

Example: Responsive Blog Layout

.blog-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}
.blog-post {
  background: #f9f9f9;
  padding: 20px;  
  border: 1px solid grey;
  border-radius: 8px;
}

<div class="blog-container">
  <article class="blog-post">
    <h2>Blog Post 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </article>
  <article class="blog-post">
    <h2>Blog Post 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </article>
  <article class="blog-post">
    <h2>Blog Post 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </article>
  <article class="blog-post">
    <h2>Blog Post 4</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </article>
</div>

This layout uses repeat(auto-fit, minmax(300px, 1fr)) to create a responsive grid that adjusts the number of columns based on the available width.

Product Gallery

A product gallery layout showcases products in a grid format, often with varying sizes and aspects. This example demonstrates a basic setup for a product gallery.

Example: Product Gallery

.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 15px;
}
.gallery-item {
  background: #eee;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid grey;
  text-align: center;
}

<div class="gallery-container">
  <div class="gallery-item">
    <img src="product1.jpg" alt="Product 1" />
    <p>Product 1</p>
  </div>
  <div class="gallery-item">
    <img src="product2.jpg" alt="Product 2" />
    <p>Product 2</p>
  </div>
  <div class="gallery-item">
    <img src="product3.jpg" alt="Product 3" />
    <p>Product 3</p>
  </div>
</div>

This layout uses repeat(auto-fill, minmax(200px, 1fr)) to automatically adjust the number of columns based on the container width.

Dashboard Interface

Dashboard interfaces often require complex grid layouts to display multiple widgets or sections. Here’s an example of a simple dashboard layout.

Example: Dashboard Interface

.dashboard-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto 1fr;
  grid-gap: 20px;
  grid-template-areas:
    "header header"
    "sidebar content";
}
.header {
grid-area: header;
background: #333;
color: #fff;
padding: 20px;
}

.sidebar {
grid-area: sidebar;
background: #f4f4f4;
padding: 20px;
}

.content {
grid-area: content;
background: #fff;
padding: 20px;
}

<div class="dashboard-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Main Content</div>
</div>

This layout uses named grid areas to allocate specific regions of the dashboard to different components.