---
title: "The Holy Grail Layout with CSS Grid"
url: https://daily.dev/posts/the-holy-grail-layout-with-css-grid-clfgcukjp
source_url: https://css-tricks.com/the-holy-grail-layout-with-css-grid/
type: article
source: "CSS-Tricks"
published: 2021-01-27T16:50:00.245Z
updated: 2021-10-07T14:17:10.317Z
tags: ["css"]
reading_time: 2
upvotes: 26
comments: 2
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.

# The Holy Grail Layout with CSS Grid

**[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 2 min read · 26 upvotes · 2 comments

## Summary

The basic layout in this demo is not really a layout for CSS Flexbox. You could pull it off if you had to, but you’d need some kind of conceit, like grouping the nav and article together in a parent element. CSS Grid was born to describe this kind of layout and will be far easier to work with.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://css-tricks.com/the-holy-grail-layout-with-css-grid/>

## Community discussion

Top comments from developers on daily.dev.

**@ghost** · 1 upvotes

> "Techniques that did manage to pull it off referred to it as the holy grail."
>
> So the "holy grail" is the old 3 col layout...

**@way2extreme** · 0 upvotes

> Nice little demo.  Thank you. CSS is a skill that requires constant attention.

## Similar posts on daily.dev

- [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 0 upvotes · 0 comments
- [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments
- [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments

---

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

[View this post on daily.dev](https://daily.dev/posts/the-holy-grail-layout-with-css-grid-clfgcukjp)