# Holy grail layout using grid-column-start, grid-row-start…?

**URL:** <https://forum.kirupa.com/t/holy-grail-layout-using-grid-column-start-grid-row-start/654636>\
**Category:** Uncategorized\
**Created:** [November 12, 2022, 4:02pm UTC](https://forum.kirupa.com/t/holy-grail-layout-using-grid-column-start-grid-row-start/654636 "2022-11-12T16:02:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [November 12, 2022, 4:02pm UTC](https://forum.kirupa.com/t/holy-grail-layout-using-grid-column-start-grid-row-start/654636/1 "2022-11-12T16:02:04Z")

</div>

I’ve created this layout using grids but another technique.

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/4/d/4d19df57bc564b171403a58dfaa6c52ac6a82ef1.png)

https://codepen.io/pelko/embed/preview/VwdbQze?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=VwdbQze

This(type of code, I want the above layout not this one below, I want to be able to do it like the coding done below i.e using grid-column-start, grid-row-start etc) is like what I want:

https://codepen.io/pelko/embed/preview/dyKWKYb?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=dyKWKYb

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 14, 2022, 7:40am UTC](https://forum.kirupa.com/t/holy-grail-layout-using-grid-column-start-grid-row-start/654636/2 "2022-11-14T07:40:48Z")

</div>

To clarify, you want the output of the second example using a grid-like syntax of the first?

---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [November 14, 2022, 12:22pm UTC](https://forum.kirupa.com/t/holy-grail-layout-using-grid-column-start-grid-row-start/654636/3 "2022-11-14T12:22:44Z")

</div>

https://codepen.io/pelko/embed/preview/NWzjzxv?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=NWzjzxv  
yes that’s exactly what I want. I built it like this now.