Relume
Log in

Community forum for knowledge and support

Updated last year

Building a Responsive CSS Grid in Webflow Without Background Images

At a glance

The community member is trying to build a responsive CSS grid like the one on the Stripe Sessions page, without using a background image. They noticed that the Relume Ipsum website achieved a similar style using an SVG grid. The community member would like the grid to align with Relume's 80 rem containers, and is unsure if this is possible or if the entire website would need to be built in a grid style.

In the comments, another community member suggests that the Stripe grid is built using custom CSS calculations, which is not proprietary code. They recommend grabbing the CSS used by Stripe and experimenting with it. The community member also suggests that fluid responsiveness, as described on the Finsweet website, could be a way to achieve the desired result, as the font sizes on the Stripe website are tied to the scale of the site.

Useful resources
EEtienne Champagne
·

Hello Lumers!

I am trying to build a background grid like the one of Stripe Sessions page. Anyone had success building a responsive CSS grid in Webflow without using background image?

I noticed Relume’s team achieved a similar style on their Relume Ipsum website but they used an SVG grid.

Ideally, I’d like the grid to align with the Relume containers of 80 rem. Is it possible or the whole website would need to be built in grid style?

Thanks!!

M
1 comment
MMatt Johnson

I mean Stripe's is all custom CSS - using CSS calculations. It's not proprietary code. If you really wanted to achieve the same result and really learn how it was done, I would just grab the CSS they used and start playing around with it.

I suppose it could also be possible with fluid responsiveness - https://finsweet.com/client-first/docs/fluid-responsive

Their font-sizes are also attached to the scale of the site - so I think in order to achieve the exact same result, you'll need to adapt to fluid responsive.

It's not as scary as it sounds - watch the video on that page.

Add a reply
Sign up and join the conversation on Slack