Holy Grail Layout with CSS Grid

├── README.md ├── holygrail.css ├── index.html ├── screenshots ├── demo.gif ├── step 1.png ├── step 2.png ├── step 3.png ├── step 4.png └── step 5.png └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # The Holy Grail Layout using CSS Grids 2 | 3 | ![Demo of Holy Grail Layout](screenshots/demo.gif) 4 | 5 | 6 | 7 | - [What's the Holy Grail Layout?](https://en.wikipedia.org/wiki/Holy_Grail_(web_design)) 8 | - [What's CSS Grid Layout?](https://drafts.csswg.org/css-grid/) 9 | - [How was this layout created?](http://bitsofco.de/holy-grail-layout-css-grid) -------------------------------------------------------------------------------- /holygrail.css: -------------------------------------------------------------------------------- 1 | /* ************************** 2 | 3 | Holy Grail Layout with CSS Grid 4 | 5 | ************************** */ 6 | 7 | /* Define grid areas */ 8 | .hg-header { grid-area: header; } 9 | .hg-footer { grid-area: footer; } 10 | .hg-main { grid-area: main; } 11 | .hg-left { grid-area: navigation; } 12 | .hg-right { grid-area: ads; } 13 | 14 | 15 | .hg { 16 | display: grid; 17 | grid-template-areas: "header header header" 18 | "navigation main ads" 19 | "footer footer footer"; 20 | 21 | grid-template-columns: 150px 1fr 150px; 22 | 23 | grid-template-rows: 100px 24 | 1fr 25 | 30px; 26 | 27 | min-height: 100vh; 28 | } 29 | 30 | 31 | 32 | @media screen and (max-width: 600px) { 33 | .hg { 34 | grid-template-areas: "header" 35 | "navigation" 36 | "main" 37 | "ads" 38 | "footer"; 39 | 40 | grid-template-columns: 100%; 41 | grid-template-rows: 100px 42 | 50px 43 | 1fr 44 | 50px 45 | 30px; 46 | } 47 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Holy Grail Layout with CSS Grid 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

The Holy Grail Layout with CSS Grid

16 |

17 |

The Holy Grail Layout using CSS Grid Layout. Read the blog post on bitsofco.de

18 | 19 |

Not working properly? You may need to enable it in your browser.

20 | 21 |

You smart, you loyal, you a genius. Let’s see what Chef Dee got that they don’t want us to eat. I’m up to something. The key to more success is to have a lot of pillows. I told you all this before, when you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing. I’m up to something. Lion! We the best. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. Hammock talk come soon.

22 | 23 |

It’s on you how you want to live your life. Everyone has a choice. I pick my choice, squeaky clean. They don’t want us to eat. Let’s see what Chef Dee got that they don’t want us to eat. The weather is amazing, walk with me through the pathway of more success. Take this journey with me, Lion! The key is to enjoy life, because they don’t want you to enjoy life. I promise you, they don’t want you to jetski, they don’t want you to smile.

24 |

25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /screenshots/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ireade/holy-grail-css-grid/d6458748f92b5e1d5b4293e650377db31e5fe5cb/screenshots/demo.gif -------------------------------------------------------------------------------- /screenshots/step 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ireade/holy-grail-css-grid/d6458748f92b5e1d5b4293e650377db31e5fe5cb/screenshots/step 1.png -------------------------------------------------------------------------------- /screenshots/step 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ireade/holy-grail-css-grid/d6458748f92b5e1d5b4293e650377db31e5fe5cb/screenshots/step 2.png -------------------------------------------------------------------------------- /screenshots/step 3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ireade/holy-grail-css-grid/d6458748f92b5e1d5b4293e650377db31e5fe5cb/screenshots/step 3.png -------------------------------------------------------------------------------- /screenshots/step 4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ireade/holy-grail-css-grid/d6458748f92b5e1d5b4293e650377db31e5fe5cb/screenshots/step 4.png -------------------------------------------------------------------------------- /screenshots/step 5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ireade/holy-grail-css-grid/d6458748f92b5e1d5b4293e650377db31e5fe5cb/screenshots/step 5.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Reset */ 2 | 3 | html, body, div, span, applet, object, iframe, 4 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 5 | a, abbr, acronym, address, big, cite, code, 6 | del, dfn, em, img, ins, kbd, q, s, samp, 7 | small, strike, strong, sub, sup, tt, var, 8 | b, u, i, center, 9 | dl, dt, dd, ol, ul, li, 10 | fieldset, form, label, legend, 11 | table, caption, tbody, tfoot, thead, tr, th, td, 12 | article, aside, canvas, details, embed, 13 | figure, figcaption, footer, header, hgroup, 14 | menu, nav, output, ruby, section, summary, 15 | time, mark, audio, video { 16 | margin: 0; 17 | padding: 0; 18 | border: 0; 19 | font: inherit; 20 | font-size: 100%; 21 | vertical-align: baseline; 22 | } 23 | article, aside, details, figcaption, figure, 24 | footer, header, hgroup, menu, nav, section { 25 | display: block; 26 | } 27 | html { 28 | box-sizing: border-box; 29 | } 30 | *, *:before, *:after { 31 | box-sizing: inherit; 32 | } 33 | 34 | 35 | 36 | /* Custom Styles */ 37 | 38 | 39 | html { 40 | font-size: 62.5%; 41 | } 42 | 43 | body { 44 | font-size: 1.5rem; 45 | line-height: 1.6; 46 | font-family: 'Open Sans'; 47 | } 48 | 49 | p { 50 | display: block; 51 | margin-bottom: 15px; 52 | } 53 | 54 | .hg-header { 55 | background-color: #ffdb3a; 56 | font-size: 2rem; 57 | font-weight: 700; 58 | font-style: italic; 59 | 60 | display: flex; 61 | justify-content: center; 62 | align-items: center; 63 | text-align: center; 64 | } 65 | 66 | .hg-footer { 67 | background-color: rgb(100, 100, 100); 68 | color: #fff; 69 | font-size: 1.2rem; 70 | font-style: italic; 71 | 72 | display: flex; 73 | justify-content: center; 74 | align-items: center; 75 | } 76 | 77 | .hg-left, 78 | .hg-right { 79 | background-color: rgb(230, 230, 230); 80 | text-align: center; 81 | } 82 | 83 | .hg-header, 84 | .hg-left, 85 | .hg-right, 86 | .hg-main { 87 | padding: 15px; 88 | } 89 | 90 | 91 | 92 | 93 | 94 | 95 | --------------------------------------------------------------------------------