Streaming live at 10am (PST)

CSS Grid sample site very jerky?


#1

Looking forward to trying out the new CSS Grid feature in WF released today, but a little put off by how slow and jerky the sample site is when resizing the browser window https://webflow.com/grid - I hope this isn’t a sign of things to come? Viewing in Chrome on a v high end iMac 5K.

What is it like for others out there?


#2

Hi @ConnectCreativeDes

@matthewpmunger posted a nice list of sites using grid in Webflow! Check them out!


#3

I just tried it myself and didn’t notice any stuttering when trying to resize the window on both mac and pc.


#4

It was the same for me, but I think it’s just the multiple hover interactions that are running that’s causing it.

I wouldn’t think it’s an issue with the Grid feature, just the sheer amount of interactions they have on that demo. Check their Grid sample sites, they’re super quick.


#5

CSS Grid is a game changer :slight_smile: Maybe this a bug. Also try to use chrome incognito


#6

Thanks for letting us know @ConnectCreativeDes - but I wouldn’t look at our launch page as the best indication of how Webflow grid sites perform. We packed a lot into this page (interactions, animations) plus an embedded iframe for the grid playground experience. With all that in mind it’s not your average page.

As @danwilko and @donaldsv suggest, a better place to look is at the cloneable layouts we built to help you learn/reverse engineer some of the more common use cases that CSS grid shines in. The community examples thread is also pretty great!

Hope this helps clear things up!


#7

@ConnectCreativeDes Just to confirm, are you seeing the same type of performance if you go directly to the non-embedded version of that site?


#8

I am viewing these example sites on 2014 old Macbook, and it renders and resizes quite smoothly.


#9

Hi Vlad. Thanks for your reply. That link (https://preview.webflow.com/preview/grid-playground?utm_source=forum&preview=7d673be1addcd79c52cdb2bba0efed5a&empty=false) takes me to the Webflow editor with a slightly different version of the site (compared to https://webflow.com/grid). In preview mode it appears smooth when resizing.

As others mentioned I think its just down to the number of interactions on the page rather than the grid system itself. No worries, looking forward to diving in and playing with the new grid system right away!