Streaming live at 10am (PST)

How to use Grid with vh and vw


#1

I would like to experiment designing a fully responsive website using vh and vw. I am wondering if/how to use vh and vw with Grid. Let’s say I am using a native 940px webflow grid. How can a pixel based grid be used with vh and vw?


#2

It can’t be :slight_smile:

It’s one or another. You can build a grid system with CSS Grid but it will be based on proportions, not constant values. WF grid system uses 12 columns of 60px with 20px gutters. A grid system made with CSS Grid with Vx values will have 12 columns and 13 gutters, of variable dimensions, proportional.If you want a VW based CSS Grid grid, full width, with the proportions fo Webflow’s one, try 6vw columns with 2vw gutters, for a total of a little under 100%… center it and you got larger gutters on the sides.

I don’t see the point of making a grid system out of CSS Grid. As the grid is the highest element in the structure, you’re going to have to deal with it for the entire page, especially in the Navigator tab where every cell content is one after another and don’t necessarily reflects what’s seen on the page as it can be moved manually.

To me, Grid is useful for certain sections where you want either to easily create something that looks like a grid (because it’s always possible to use anything else to do it, and/or control exactly what’s happening in between breakpoints, because you have something that is unusual to put in place.


#3

Hm, I am not sure I understand 100%. I am relatively new to Webflow. Let’s take a look at this template: https://webflow.com/templates/html/uncommon-portfolio-website-template
As you can see vh/vw were used for both fonts and padding/margin. I like this approach since it’s fully responsive and you can control how it cool look on any screen. Now, for my website I would like to have a grid system to simply make sure everything is symmetrical and in order. But I can’t figure out how to merge both.


#4

@Josef Glad you’re giving Grid a try; I hope it can help solve your layout needs!

Quick check: Have you tried using vw/vh units for the width and height of your grid container, and using fr units for the row/column sizes? Additionally you’ll want to set any other length/size values based on vw and vh (or possibly vmin and/or vmax). This might be all you need.

However, if you could provide some more detail about what specifically you’re trying to achieve (a mockup image is worth 1000 lines of HTML & CSS :wink:) I’m sure we can provide better help.

Cheers!