How to create magazine layout with grid in css

CssHow-ToBeginner · 4 min read

How to Create Magazine Layout with CSS Grid: Simple Guide

Use display: grid on a container and define columns and rows with grid-template-columns and grid-template-rows. Place content items in grid cells using grid-column and grid-row to create a magazine-style layout with varied article sizes and images.

📐

Syntax

The basic syntax to create a grid container is using display: grid;. You define the grid structure with grid-template-columns and grid-template-rows. Items inside the grid can be placed using grid-column and grid-row.

display: grid; - turns an element into a grid container.
grid-template-columns: sets the number and size of columns.
grid-template-rows: sets the number and size of rows.
grid-column / grid-row: controls where an item starts and ends in the grid.

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
}
.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
.item2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

💻

Example

This example shows a simple magazine layout with a big feature article, smaller side articles, and images arranged in a grid. It uses three columns and rows that adjust height automatically. The gap adds space between items.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Magazine Layout with CSS Grid</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 1rem;
  }
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    gap: 1rem;
  }
  .feature {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    background: #f4a261;
    padding: 1rem;
    color: white;
  }
  .side1 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    background: #2a9d8f;
    padding: 1rem;
    color: white;
  }
  .side2 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    background: #e76f51;
    padding: 1rem;
    color: white;
  }
  .footer {
    grid-column: 1 / 4;
    background: #264653;
    color: white;
    padding: 1rem;
    text-align: center;
  }
</style>
</head>
<body>
  <div class="container">
    <article class="feature">
      <h2>Feature Article</h2>
      <p>This is the main story with a large space to grab attention.</p>
    </article>
    <article class="side1">
      <h3>Side Article 1</h3>
      <p>Smaller story on the side.</p>
    </article>
    <article class="side2">
      <h3>Side Article 2</h3>
      <p>Another smaller story.</p>
    </article>
    <footer class="footer">Magazine Footer Information</footer>
  </div>
</body>
</html>

Output

A webpage with a large orange feature article on the left spanning two rows, two smaller colored side articles stacked on the right, and a full-width dark footer below.

⚠️

Common Pitfalls

Common mistakes when creating magazine layouts with CSS Grid include:

Not setting display: grid; on the container, so grid properties don't work.
Forgetting to define columns or rows, which causes items to stack unexpectedly.
Using fixed pixel sizes that break responsiveness instead of flexible units like fr or minmax().
Overlapping items unintentionally by assigning conflicting grid areas.

Always test your layout on different screen sizes to ensure it adapts well.

css

.wrong-container {
  /* Missing display: grid; */
  grid-template-columns: repeat(3, 1fr);
}

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

📊

Quick Reference

Here is a quick cheat sheet for CSS Grid properties useful for magazine layouts:

Property	Description
display: grid;	Turns an element into a grid container.
grid-template-columns	Defines the number and size of columns.
grid-template-rows	Defines the number and size of rows.
grid-column	Sets the start and end column for an item.
grid-row	Sets the start and end row for an item.
gap	Sets space between grid items.
grid-auto-rows	Sets default row size for implicit rows.

✅

Key Takeaways

Use display: grid and define columns and rows to create the grid structure.

Place items with grid-column and grid-row to control layout areas.

Use flexible units like fr and minmax for responsive magazine layouts.

Always include gap for spacing between grid items.

Test your layout on different screen sizes to ensure it looks good everywhere.