Streaming live at 10am (PST)

Random Grid Layout


#1

Morning all,

How would I go about creating the following random grid layout?
See the attached image. The colour blocks will be images.

I understand basic relative positioning.

Any tips would be really appreciated!

Thanks,
Ryan


#2

Hi @ryan585,

When you are saying random, do you want to be generated automatically? If yes you will need to go through custom code with javascript.

Probably something like a loop choosing a random x and y transform and setting it to these elements.

Otherwise if you wanted this exact representation you can always play with transforms and overflow properties.

Have a look at 1min11 in this video:

I hope this help


#3

Nope sorry, not generated automatically.

It’s more of a rough representation of the block image I shared.
What is the best way to achieve this?
Any pointers?

Very similar to this

Thanks for the vid share - great for when I get to parallax :slight_smile:


#4

Yes parallax is a lot of fun :slight_smile:

But the purpose of this video was to show you the kind of layout with transforms.
If you don’t consider the depth (z space) you can still do it.

The way I will go about this then would be as following.

1 - Set up a column element and put the setting on 2 or 3 columns
2- Place the divs you need in it to have a rough layout of the order and set them to relative
3 - Use the transform property as well as the z-index to fine tune your offset and overlapping

It should do the trick
(I wouldn’t use absolute positioning because it will make it hard to keep responsiveness)

As for the transform, remember that it will not change the flow of the document (meaning transform will not push around other elements) this is why I would have first the column layout to set up the rough height and width of the layout to fit the content in the document flow between what can come before and after this section in your project.

This would be my approach and I hope it will give you a hint on how to achieve you design.

This part of Webflow university is more relevant to your setup then :


#5

Excellent :slight_smile:

I didn’t think about using columns to start with.

Sounds like a great idea. I’ll give it a go and share my progress!

Thanks again, big help.


#6

Glad I could help,

If it makes it for you don’t forget to mark this topic as solved to close it :wink:
Looking forward to see what you are building with this.


#7

Hey, wanted to share my progress so far!

If you’ve got any thoughts on how i’ve built it so far that would be great.

So…

  • I set up 2 columns
  • Instead of placing divs in I used the media > image block? Is that ok vs divs?
  • I then set them to relative, messed around with the position and z index
  • Had a quick play with parallax but I think it needs more
  • Played around with intro animation on the text
  • Played with the icon at the bottom, hover state rotate and then sends you back to the top

Anyway, feels a bit buggy / breaks when I change breakpoints but I haven’t played around with mobile etc!

Here is the link: https://preview.webflow.com/preview/cock-a-hoop?preview=45e867859fe68ea5a890cc07c8138543

Thanks!


#8

Hey man, did you have a chance to look at the link?

:slight_smile: