---
title: "Three ways to build Crouwel's Hiroshima poster in CSS"
url: https://daily.dev/posts/three-ways-to-build-crouwel-s-hiroshima-poster-in-css-7gkfea1gj
source_url: https://hidde.blog/three-ways-to-build-crouwels-hiroshima-poster-in-css
type: article
source: "Hidde de Vries — hidde.blog"
published: 2026-05-31T07:48:59.592Z
updated: 2026-05-31T09:32:04.872Z
tags: ["webdev", "css"]
reading_time: 6
upvotes: 0
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Three ways to build Crouwel's Hiroshima poster in CSS

**[Hidde de Vries — hidde.blog](https://daily.dev/sources/hiddedevries)** · 6 min read · 0 upvotes · 0 comments

## Summary

A practical exploration of three different CSS Grid approaches to recreating Wim Crouwel's iconic Hiroshima poster: a 4-column content-based layout, a 9-column letter-based layout using `display: contents`, and a 17-column stem-based layout for pixel-perfect alignment. The post compares visual perfection (more columns, precise alignment) versus functional pragmatism (fewer columns, resilient to content changes), concluding that the right choice depends on context — promotional sites suit precision, while CMS-driven sites benefit from flexibility.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://hidde.blog/three-ways-to-build-crouwels-hiroshima-poster-in-css>

## Similar posts on daily.dev

- [My CSS layout strategy](https://daily.dev/posts/my-css-layout-strategy-lfp48ynra) · Blogging and all that Malarkey · 49 upvotes · 2 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css)

[View this post on daily.dev](https://daily.dev/posts/three-ways-to-build-crouwel-s-hiroshima-poster-in-css-7gkfea1gj)