# Tutorial: The easy way to build complex CSS Grids

**URL:** <https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522>\
**Category:** Elements\
**Created:** [September 4, 2024, 2:27pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522 "2024-09-04T14:27:22Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [October 13, 2024, 9:20pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/21 "2024-10-13T21:20:45Z")

</div>

The CSS Grid options we support in the V2 components are pretty advanced, more so than anything else I’ve seen on the Mac.

Here’s something I was working on using the new v2 components… is this the kind of offset stuff you wanted? (we also support assigning a custom order to grid items at different breakpoints).

 ![CleanShot 2024-10-13 at 10 .16.46@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/d/dd652807439b50cc6ae07dd7d19a173b8a139653.jpeg)

I’m pretty sure you’ll be able to create whatever layouts you want. Do you have any specific layout examples you can share?

---

<div class="post-metadata">

**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\
**Post date:** [October 13, 2024, 9:28pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/22 "2024-10-13T21:28:32Z")

</div>

I’m sure you have probably seen this. But this is a bunch of example layouts and use ideas for CSSgrid.

[https://gridbyexample.com/examples/](https://gridbyexample.com/examples/)

---

<div class="post-metadata">

**Author:** ![pumpkin](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@pumpkin](https://forums.realmacsoftware.com/u/pumpkin)\
**Post date:** [October 13, 2024, 9:36pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/23 "2024-10-13T21:36:58Z")

</div>

I don’t have a specific example in mind, I was just wondering if there was another way then negative margins to let grid items overlap.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [October 13, 2024, 9:40pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/24 "2024-10-13T21:40:36Z")

</div>

> [@Flash](#):
>
> I’m sure you have probably see this. But this is a bunch of example layouts and use ideas for CSSgrid.
> 
> [https://gridbyexample.com/examples/](https://gridbyexample.com/examples/)

Yup, Elements can easily create all of those examples 😅

---

<div class="post-metadata">

**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\
**Post date:** [October 13, 2024, 9:43pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/25 "2024-10-13T21:43:14Z")

</div>

Then v2 has come a long way! Amazing!

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [October 14, 2024, 8:40am UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/26 "2024-10-14T08:40:10Z")

</div>

> [@pumpkin](#):
>
> Will we see things like grid template areas etc, for content positioning at a later point?

We could add this in a later version, however, I think designing grids with template areas would require some form of separate visual editor for creating template areas.

Basically I think it needs more thought and to be done properly from the get go, and that won’t make it in to v1.0.

> [@pumpkin](#):
>
> You achieved overlapping grid containers using negative margins, but that’s not the real thing 😉

You can achieve overlapping grid items with the current set of components - we support start and end lines for both columns and rows.

We also have support for margins and translate x and y, so you have the flexibility to move things around in ways that make sense for the design you’re working on 🙂

---

<div class="post-metadata">

**Author:** ![pumpkin](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@pumpkin](https://forums.realmacsoftware.com/u/pumpkin)\
**Post date:** [October 14, 2024, 7:37pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/27 "2024-10-14T19:37:14Z")

</div>

> [@bon](#):
>
> You can achieve overlapping grid items with the current set of components - we support start and end lines for both columns and rows.

Thanks for your reply @bon. I tried to achieve exactly that but didn’t succeed. Using start and end lines for both columns and rows doesn’t give me overlapping grid items like I thought it would. Every other item in the grid just moves. Maybe I’m too tired or it’s too late, but I didn’t find a way to have grid items overlap that way.

---

<div class="post-metadata">

**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\
**Post date:** [October 14, 2024, 7:48pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/28 "2024-10-14T19:48:43Z")

</div>

Im not sure that it is a good idea to try to overlap one grid with another. Defeats the purpose of a grid to me. It seems to me the better idea is to set the content container’s layer and the contents themselves to the overlap position you want.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 15, 2024, 10:54am UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/29 "2024-10-15T10:54:16Z")

</div>

this is pure grid, overlapping, animation, even 3d, didn’t show that or control of the grid sizing in this video did a few months ago.

---

<div class="post-metadata">

**Author:** ![pumpkin](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@pumpkin](https://forums.realmacsoftware.com/u/pumpkin)\
**Post date:** [October 16, 2024, 7:37pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/30 "2024-10-16T19:37:09Z")

</div>

Thanks for sharing @upssjw Steve. I still don’t seem to find a way to do that with the current beta though.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 16, 2024, 9:18pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/31 "2024-10-16T21:18:48Z")

</div>

@pumpkin  
that’s because this is a custom component I created, I have not finished as I am waiting until the public beta incase there are any changes, it works but needs some tweaks I think, and more screen sizes, plus tidying up, as I have other ideas

I have left five grid items in the file with the grid turned, everything turned off and nothing shows

I think this version is ok, try if you want, see if yo can make it work

the grid is pixels so if you have 11 grids you should really set the grid to a numberr divisible by 11, still works if you don’t, there are one or two bits I need to work on but I left work arounds for now, oh the traveling grid item was manual code I put in as I would like to add other options - I added sticky top-[100px] I think to the top grit item  
there are only 5 grid items  
it was only a practice

[elementsapp://downloadDocument/znSRv4EnGGhc](elementsapp://downloadDocument/znSRv4EnGGhc)

there are a few calcs going for the grid layout, enjoyed that bit

```auto
 --gridsh: 100;
 --gridsv: 100; 
--gridh: calc(var(--gridsh)/{{maindgridcols}});
--gridv: calc(var(--gridsv)/{{maingridrows}});
--gridhperc: calc(var(--gridh) / var(--gridsh) * 100%);
--gridvperc: calc(var(--gridv) / var(--gridsv) * 100%);

 --gridshm: 100;
 --gridsvm: 100; 
--gridhm: calc(var(--gridshm)/{{mobgridcols}});
--gridvm: calc(var(--gridsvm)/{{mobgridrows}});
--gridhpercm: calc(var(--gridhm) / var(--gridshm) * 100%);
--gridvpercm: calc(var(--gridvm) / var(--gridsvm) * 100%);

```

---

<div class="post-metadata">

**Author:** ![leadtromba](https://avatars.discourse-cdn.com/v4/letter/l/ee59a6/32.png) [@leadtromba](https://forums.realmacsoftware.com/u/leadtromba)\
**Post date:** [May 20, 2025, 3:20pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/32 "2025-05-20T15:20:45Z")

</div>

My grids do not behave at all the way they do in the tutorial. I can only drag and drop into the first cell of the grid. I cannot select or do anything to any of the other cells. In the node browser, I do not see the four cells shown in the tutorial - I only see one for the entire grid. I can’t get to the controls to determine width of individual cells. What am I doing wrong? Thanks! (I tried to include a screenshot, but your system wouldn’t allow it.)

---

<div class="post-metadata">

**Author:** ![sbchasin](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sbchasin/32/26943_2.png) [@sbchasin](https://forums.realmacsoftware.com/u/sbchasin)\
**Post date:** [May 20, 2025, 3:26pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/33 "2025-05-20T15:26:20Z")

</div>

Have you added containers and marked them as grid items??

---

<div class="post-metadata">

**Author:** ![leadtromba](https://avatars.discourse-cdn.com/v4/letter/l/ee59a6/32.png) [@leadtromba](https://forums.realmacsoftware.com/u/leadtromba)\
**Post date:** [May 20, 2025, 3:27pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/34 "2025-05-20T15:27:16Z")

</div>

I can only add a container to the first cell in the grid.

---

<div class="post-metadata">

**Author:** ![sbchasin](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sbchasin/32/26943_2.png) [@sbchasin](https://forums.realmacsoftware.com/u/sbchasin)\
**Post date:** [May 20, 2025, 3:30pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/35 "2025-05-20T15:30:13Z")

</div>

In the grid itself, have you set the number of columns??

 ![Screenshot 2025-05-20 at 11.29.32](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/1/a11c9e0aaa73a11a50f7c4a21e2a840d6e10b568.png)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [May 20, 2025, 3:32pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/36 "2025-05-20T15:32:47Z")

</div>

hey @leadtromba,

Here’s a quick (and basic) video explaining grids. There’s lots more you can do with grids, but this should get you started 😊

---

<div class="post-metadata">

**Author:** ![leadtromba](https://avatars.discourse-cdn.com/v4/letter/l/ee59a6/32.png) [@leadtromba](https://forums.realmacsoftware.com/u/leadtromba)\
**Post date:** [May 20, 2025, 3:34pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/37 "2025-05-20T15:34:19Z")

</div>

Yes, I did that in the container in the first cell of the grid - in a four column grid, the first cell now spans three columns. How do I affect the other cell?

---

<div class="post-metadata">

**Author:** ![sbchasin](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sbchasin/32/26943_2.png) [@sbchasin](https://forums.realmacsoftware.com/u/sbchasin)\
**Post date:** [May 20, 2025, 3:35pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/38 "2025-05-20T15:35:15Z")

</div>

Click on that first cell and set it to span just one column (if that is what you want) and you should be able to “see” the other cells

---

<div class="post-metadata">

**Author:** ![leadtromba](https://avatars.discourse-cdn.com/v4/letter/l/ee59a6/32.png) [@leadtromba](https://forums.realmacsoftware.com/u/leadtromba)\
**Post date:** [May 22, 2025, 11:01am UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/39 "2025-05-22T11:01:15Z")

</div>

Thanks! That was hugely helpful! 😀

---

<div class="post-metadata">

**Author:** ![RussOggi255](https://avatars.discourse-cdn.com/v4/letter/r/ee7513/32.png) [@RussOggi255](https://forums.realmacsoftware.com/u/RussOggi255)\
**Post date:** [May 22, 2025, 12:36pm UTC](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522/40 "2025-05-22T12:36:59Z")

</div>

Hi @Dan, I started to follow this video and right from the start, when I drop a Grid into the container it does not have any Grid Items like your does. What am I missing?

 ![Screenshot 2025-05-22 at 13.36.38](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/a/2a40ef2c6af97359de68a0b4bb351ddb98d0fb36.png)

[Previous page](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522.md?page=1)

[Next page](https://forums.realmacsoftware.com/t/tutorial-the-easy-way-to-build-complex-css-grids/44522.md?page=3)