Grid with image/logo overlapping the vertical border of 2 adjoining columns

[TwoLuckyDucks]

Hi there,
Have been playing around with Grid and it looks amazing.
Want to achieve this look…

Cheers
Simon

[christian]

Hey Simon,

The simplest and the fastest way to achieve that is to install the Geometry Grid from the Design Cloud.

After adding to your content, you just remove the left and right cells and you’ll be left with the middle cell then you can edit the rest.

To fully understand how the Geometry Grid works, please watch the video tutorial below.

CSS Grid: Overlapping Content Layout (Advanced)

Hope that helps.

[TwoLuckyDucks]

Thanks… but this is general design approach question… not a specific make it look just like the image I posted (with no content in left and right columns).
ie. I need the 3 cells (1 on left and right side) so that I can add whatever content I want to each cell/column on the left and the right.

Or should this not be done with grid element? (New row element + 2 or 3 columns and some trick to get logo overlapping and centred and responsive)

(FYI…I have watched those videos and looked at the Geometry Grid preset… did not help)

[ruenel]

Hello Simon,

Actually, you need to have at least 4 or 6 cells layout and then use the Grid Spec to position your Cells within the grid.

• Grid | Themeco Docs

If I am gonna use grid, I will have a setup like this:

Please check out the example layout. Thanks.