Grid Masonry blocks?

1

hi there,
I’m very new to grids and was wondering if I could get the 4th item to go up to the other one above it without affecting the order…
image
Let me know!

2

Use this site to generate grid template areas, it’s easy :slight_smile:

Let me know if you can’t make it work.

3

yeah… this doesn’t explain anything to me… Like I said, I’m really new to grids. This tool is too confusing to me.

4

Here’s a bit more context to my current setup:

image
image1910×794 289 KB

1 Like
5

Basically if you want the fourth item to go over the one above it then you would only need 3 grid items not 4.

6

Add this custom css in your container

root {
grid-template-areas: 
    "a c"
    "b c"; 
}

Now go to each of your items and write this

//first item
root {
    grid-area: a;
}

//second item
root {
    grid-area: b;
}

//third item
root {
    grid-area: c;
}

On smaller screens remove this to make it responsive.

7

Hi there,
Thanks for the detailed reply, i hoped this wouldve just been a change in the default options in bricks. This is gonna be too much effort tbh. I’ll convert them into 2 blocks in row mode :wink:
Thanks for the effort!

8

Pretty sure you can do it with Bricks, but I am not much good with Grid Rows, I prefer to use Template Areas :slight_smile: