philippf
(Philipp)
September 25, 2018, 1:43pm
1
Hi,
I’m wondering what the best way is to create a similar grid as this Andrew’s website:
Adam Ho is a designer and artist with a strong focus on branding, interaction design, and art direction. He is based in Queens, New York. He is currently running an independent studio design practice, working on Liquidities, and a lead at VectorDAO,...
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
aaronocampo
(Aaron Ocampo)
September 25, 2018, 3:30pm
2
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
philippf
(Philipp)
September 26, 2018, 12:57am
4
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