A framework cheat sheet for the Holy grail layout
The Holy grail layout consists of a header, a sidebar, a content section, and a footer. We discussed this layout approach in the Important terms and their definitions section.
The general layout can be achieved with any framework that offers a grid system. However, the layout size, the overall width, the ratio of sidebar width to content width, the header height, and the footer height differ from website to website.
This section provides code snippets with sensible defaults for all the frameworks discussed in Chapter 8, Grids in the Wild – How Frameworks Implement Grids. We use the <header> tag to denote the header, the <aside> tag to denote the sidebar, the <main> tag to denote the content section, and the <footer> tag to denote the footer.
Tailwind
We can achieve the Holy grail layout with this HTML structure and the following CSS classes:
<div class="grid grid-cols-3">...
