CSS Grid Blog Layout - Build a Responsive Blog Card Grid

A responsive blog layout should look good on desktops, tablets, and mobile devices without requiring a different layout for every screen size. CSS Grid makes this easier by letting you create flexible rows and columns with a small amount of CSS.

In this tutorial, you’ll learn how to build a reusable CSS Grid blog card layout with responsive columns, featured images, spacing, hover effects, and mobile-friendly styling.

What Is CSS Grid?

CSS Grid is a two-dimensional CSS layout system. It is designed for arranging elements in rows and columns, which makes it a natural choice for blog cards, product listings, image galleries, dashboards, and similar layouts.

A basic Grid container looks like this:

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

The 1fr unit means that each column receives an equal share of the available space.

For a responsive blog, however, we can do better than a fixed three-column layout.

HTML Structure for the Blog

Start with a semantic structure using main, section, and article elements:

<main class="container">
  <h1>Latest Articles</h1>

  <section class="blog-grid">
    <article class="blog-card">
      <img
        class="blog-img"
        src="images/css-grid.jpg"
        alt="CSS Grid blog layout example"
      >

      <div class="blog-content">
        <span class="blog-category">CSS</span>

        <h2>Getting Started With CSS Grid</h2>

        <p>
          Learn how CSS Grid can help you create modern,
          responsive website layouts.
        </p>

        <a href="/css-grid-tutorial/">Read More</a>
      </div>
    </article>

    <article class="blog-card">
      <img
        class="blog-img"
        src="images/responsive-design.jpg"
        alt="Responsive web design example"
      >

      <div class="blog-content">
        <span class="blog-category">Web Design</span>

        <h2>How to Build Responsive Websites</h2>

        <p>
          Learn practical techniques for creating layouts
          that work across different screen sizes.
        </p>

        <a href="/responsive-web-design/">Read More</a>
      </div>
    </article>

    <article class="blog-card">
      <img
        class="blog-img"
        src="images/html-layout.jpg"
        alt="HTML layout example"
      >

      <div class="blog-content">
        <span class="blog-category">HTML</span>

        <h2>HTML Layout Basics</h2>

        <p>
          Understand the semantic HTML structure behind
          modern content-focused websites.
        </p>

        <a href="/html-layout/">Read More</a>
      </div>
    </article>
  </section>
</main>

Using article for each independent blog post gives the page a meaningful document structure and makes the markup easier to understand.

Create the Responsive Grid

The most important part of the layout is the Grid definition:

.blog-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(280px, 1fr)
  );
  gap: 30px;
}

Let’s break this property down.

display: grid

display: grid;

turns the element into a Grid container. Its direct children become Grid items.

repeat()

The repeat() function avoids writing the same column definition multiple times.

For example:

grid-template-columns: repeat(3, 1fr);

is equivalent to:

grid-template-columns: 1fr 1fr 1fr;

auto-fit

auto-fit allows the browser to fit as many columns as possible into the available width.

As the viewport becomes narrower, the number of columns can automatically decrease.

minmax()

The following expression gives each card a flexible but useful width:

minmax(280px, 1fr)

This means the column can be as small as approximately 280px and can grow to use available space.

Together, these functions create a flexible blog grid:

grid-template-columns: repeat(
  auto-fit,
  minmax(280px, 1fr)
);

You can usually use this pattern without creating a separate media query for every device width.

Add Spacing Between Blog Cards

Use the gap property to create consistent spacing between Grid items:

.blog-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(280px, 1fr)
  );
  gap: 30px;
}

Unlike adding margins to every card, gap keeps the spacing controlled by the Grid container.

You can also use different row and column gaps:

.blog-grid {
  row-gap: 40px;
  column-gap: 24px;
}

Style the Blog Card

Now create the visual appearance of each article:

.blog-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

The overflow: hidden declaration keeps the image inside the card’s rounded corners.

Add a Hover Effect

A subtle hover effect can make the cards feel interactive:

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

The transition defined on .blog-card makes the movement smooth.

Keep hover effects subtle on content-heavy websites so they don’t distract users from the article titles and descriptions.

Style Blog Images

Blog images can have different original dimensions. Use object-fit: cover to keep a consistent card appearance:

.blog-img {
  width: 100%;
  height: 200px;
  display: block;
  object-fit: cover;
}

The important property is:

object-fit: cover;

It scales the image while preserving its aspect ratio and fills the defined image area.

Style the Blog Content

Add padding around the text:

.blog-content {
  padding: 20px;
}

Then style the category, heading, description, and link:

.blog-category {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-content h2 {
  margin: 10px 0;
  font-size: 22px;
  line-height: 1.3;
}

.blog-content p {
  margin: 0 0 20px;
  line-height: 1.6;
}

.blog-content a {
  font-weight: 600;
  text-decoration: none;
}

Complete CSS Grid Blog Layout

Here is the complete CSS for the example:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f7fa;
}

.container {
  width: min(1200px, 92%);
  margin: 60px auto;
}

.container > h1 {
  margin-bottom: 30px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(280px, 1fr)
  );
  gap: 30px;
}

.blog-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.blog-img {
  width: 100%;
  height: 200px;
  display: block;
  object-fit: cover;
}

.blog-content {
  padding: 20px;
}

.blog-category {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-content h2 {
  margin: 10px 0;
  font-size: 22px;
  line-height: 1.3;
}

.blog-content p {
  margin: 0 0 20px;
  line-height: 1.6;
}

.blog-content a {
  font-weight: 600;
  text-decoration: none;
}

auto-fit vs auto-fill

You may also see auto-fill used for responsive Grid layouts:

grid-template-columns: repeat(
  auto-fill,
  minmax(280px, 1fr)
);

Both functions can create responsive columns, but their behavior differs when there is extra space and fewer items.

With auto-fit, available tracks can collapse and existing cards can expand to use the space.

With auto-fill, the browser can preserve the space for tracks that could fit even when there are not enough items to fill them.

For many blog card layouts, auto-fit provides the desired behavior because the cards naturally expand when fewer cards are present.

CSS Grid vs Flexbox for Blog Layouts

CSS Grid and Flexbox are not competing technologies. They are useful for different parts of a page.

A blog page can use both. CSS Grid can arrange the cards, while Flexbox can arrange the content inside an individual card.

Make the Layout More Mobile-Friendly

The Grid itself is responsive, but you can adjust spacing and image height for smaller screens:

@media (max-width: 600px) {
  .container {
    margin: 30px auto;
  }

  .blog-grid {
    gap: 20px;
  }

  .blog-img {
    height: 180px;
  }

  .blog-content {
    padding: 16px;
  }
}

The goal is not to create dozens of breakpoints. Start with the flexible Grid and add a small number of media queries only when the design actually needs them.

Accessibility Tips

A blog grid should be easy to understand for both sighted users and people using assistive technologies.

Use semantic elements such as main, section, and article.

Give each meaningful image descriptive alternative text:

<img
  src="blog-image.jpg"
  alt="Responsive CSS Grid blog layout example"
>

Use descriptive link text instead of generic phrases such as “Click here”:

<a href="/css-grid-tutorial/">
  Read the CSS Grid tutorial
</a>

Also make sure text and links have sufficient color contrast.

Common CSS Grid Mistakes

Using fixed card widths

Avoid unnecessarily large fixed widths:

.blog-card {
  width: 400px;
}

This can cause horizontal scrolling on smaller screens.

Let Grid control the available width instead:

.blog-grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(280px, 1fr)
  );
}

Forgetting box-sizing

A global box-sizing rule makes sizing more predictable:

* {
  box-sizing: border-box;
}

Stretching images

Use object-fit: cover when images need to fill a fixed-height area without looking distorted.

Adding too many media queries

Try CSS Grid’s auto-fit, auto-fill, and minmax() functions before creating a large collection of device-specific breakpoints.

How the Responsive Layout Works

The following rule is the key to the entire example:

grid-template-columns: repeat(
  auto-fit,
  minmax(280px, 1fr)
);

On a wide screen, several cards can fit in one row.

On a medium screen, fewer cards fit.

On a narrow screen, the cards can move into a single-column layout.

The browser handles these changes based on the available width.

Frequently Asked Questions

Is CSS Grid good for a blog layout?

Yes. CSS Grid is well suited to repeated content arranged in rows and columns, such as blog cards, news articles, products, and image galleries.

How do I make a CSS Grid blog responsive?

A common approach is to combine repeat(), auto-fit, and minmax():

grid-template-columns: repeat(
  auto-fit,
  minmax(280px, 1fr)
);

What does 1fr mean in CSS Grid?

The fr unit represents a fraction of the available space in the Grid container. For example, 1fr 1fr creates two equal flexible columns.

What does minmax() do?

minmax() defines the minimum and maximum size of a Grid track. In this example, minmax(280px, 1fr) keeps columns flexible while giving them a practical minimum size.

Should I use CSS Grid or Flexbox for blog cards?

CSS Grid is useful when you need multiple rows and columns. Flexbox is useful for arranging elements along one direction, such as the contents of an individual card or a navigation menu.

Can CSS Grid work without media queries?

Yes. Responsive functions such as auto-fit, auto-fill, and minmax() can handle many responsive layouts without multiple media queries.

Conclusion

CSS Grid provides a clean way to build responsive blog layouts without manually calculating card widths for every screen size.

The most important rule in this tutorial is:

grid-template-columns: repeat(
  auto-fit,
  minmax(280px, 1fr)
);

When combined with gap, object-fit, semantic HTML, responsive spacing, and subtle card effects, it provides a reusable foundation for blog pages, news websites, portfolios, product listings, and other content-focused interfaces.

View the Live Demo to see the responsive CSS Grid blog layout in action.