Tutorial: The easy way to build complex CSS Grids

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).

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

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/

1 Like

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.

Yup, Elements can easily create all of those examples :sweat_smile:

2 Likes

Then v2 has come a long way! Amazing!

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.

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 :slight_smile:

3 Likes

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.

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.

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.

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

@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

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

 --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%);
1 Like