# A Bit of a Complex Layout

**URL:** <https://forum.kirupa.com/t/a-bit-of-a-complex-layout/645724>\
**Category:** Uncategorized\
**Created:** [January 17, 2021, 1:58am UTC](https://forum.kirupa.com/t/a-bit-of-a-complex-layout/645724 "2021-01-17T01:58:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 17, 2021, 1:58am UTC](https://forum.kirupa.com/t/a-bit-of-a-complex-layout/645724/1 "2021-01-17T01:58:28Z")

</div>

![Screen Shot 2021-01-16 at 10.49.41 AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/e/eedc93186c0d2d77e3cd269303b8347086cc14ea.png)

For something like this - would you use CSS Grid or can this still be done with containers and flex display?

---

<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:** [January 17, 2021, 6:45am UTC](https://forum.kirupa.com/t/a-bit-of-a-complex-layout/645724/2 "2021-01-17T06:45:31Z")

</div>

Definitely CSS Grid 😝

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 17, 2021, 3:14pm UTC](https://forum.kirupa.com/t/a-bit-of-a-complex-layout/645724/3 "2021-01-17T15:14:45Z")

</div>

Good to know - thanks. I’m off to try to understand this facet of html now🙃

---

<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:** [January 18, 2021, 12:25am UTC](https://forum.kirupa.com/t/a-bit-of-a-complex-layout/645724/5 "2021-01-18T00:25:30Z")

</div>

There are several ways to pull this off using CSS grid, but this might be one handy approach: [https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template)

🥳

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [January 18, 2021, 2:14am UTC](https://forum.kirupa.com/t/a-bit-of-a-complex-layout/645724/6 "2021-01-18T02:14:33Z")

</div>

Thanks - I will eventually get to the point where I will understand what is being presented in the link but I am not there just yet. More study is required first.