Grid items centered/padded/staggered

Hi,

I’m wondering what the best way is to create a similar grid as this Andrew’s website:

Specifically the portfolio items " Zendesk—Customer stories", “The Verge—CES visual identity”

I believe he has a fixed px for the items. They are perfectly centered with some padding on the sides and middle, and top to stagger it (?).

I have tried to achieve the same, but my version is very buggy.

I’d highly appreciate your tips/instructions.

Thank you,
Philipp

Can you share your read only link please?

In general - It’s hard to answer (This is more a task for a freelancer).

But ± the idea:

hover trick

The hover idea is by simple CSS (overflow: hidden and overflow: visible)

.photomask2, .photomask2.verge {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
     width: 100%;
     background-image: -webkit-linear-gradient(270deg,rgba(255,188,236,.73),rgba(255,188,236,.73)),-webkit-radial-gradient(circle farthest-corner at 8% 14%,#ff54ff,#ff1620 99%);
     height: 500px;
 } 

.photomask2.verge:hover {
  overflow: visible;
 overflow-x: visible;
 overflow-y: visible;
}

grid

The uneven layout.

By flex grid - by default, each col height is the match.
One more nested grid (For right col) with min-height:100%; & flex-direction: column
& justify-content: flex-end;

https://codepen.io/ezra_siton/pen/ZMdjXr

https://webflow.com/website/Responsive-Flexbox-12-Column-Grid

image

The image alignment in your example set manually (Negative padding and so on) + transform without class/styles this how the image looks:

1 Like

Hi Silton Systems,

Thank you for the very detailed answer. This was very helpful, especially pointing out the Webflow tutorial on flex grids “Webflow Repsonsive Flexbox Grid v1.2”. I was able to replicate the “Full Width Container” and that seems to be working great. Regarding the hover trick, I am a little less concerned with and will create something different.

Thanks for your help.

Philipp

1 Like