Back to Snippets

CSS Grid Magazine Layout

Create a sophisticated editorial layout using CSS Grid areas. This snippet demonstrates how to arrange a feature article, sidebars, and smaller posts into a cohesive, responsive newspaper-style grid.

330

#css

#grid

#magazine

#layout

#newspaper

#editorial

#responsive

/HTML *CSS ()JS Output Live Updates

* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", serif;
  background: #f4f4f4;
  padding: 40px;
}

.magazine-grid {
  display: grid;
  gap: 15px;
  max-width: 900px;
  margin: 0 auto;
  grid-template-columns: 1fr;
  /* Mobile First: Stacked */
}

.item {
  background: white;
  padding: 20px;
  border: 1px solid #ddd;
}

.feature {
  background: #111;
  color: white;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.tag {
  background: #ef4444;
  color: white;
  padding: 4px 8px;
  text-transform: uppercase;
  font-size: 0.75rem;
  align-self: flex-start;
  margin-bottom: 10px;
  font-family: sans-serif;
}

h2 { margin: 0; font-size: 2rem; line-height: 1.1; }
h3 { margin: 0; font-size: 1.2rem; }

@media (min-width: 768px) {
  .magazine-grid {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 150px 150px auto;
    grid-template-areas:
      "main side1"
      "main side2"
      "foot foot";
  }

.feature { grid-area: main; }
  .side-1 { grid-area: side1; }
  .side-2 { grid-area: side2; }
  .footer-news { grid-area: foot; background: #e5e5e5; font-family: sans-serif; }
}

CSS Grid Magazine Layout

Share Code Snippet