There doesn’t seem to be a way to set a maximum width to a certain set of grid columns within a grid element.
My desire is to have a custom container (a div) to contain most of the site’s content, let’s say a 3 column grid. Every once in a while, I’d like to break that container (div) and have an element extend to the left/right edge of the entire viewport, but still be inline with the center grid’s columns and gaps. I’ve tried this a few different ways without any success.
Essentially, I need a grid that spans the full width of the viewport with some extra tricky functionality added to it - a full width grid, that has a group of grid columns contained by a max width - the result being a grid that I can pull elements manually throughout the full width, but the middle set acting as a “container”.
Welcome to our little community here. I have reviewed your project and am still not sure what you want to have accomplished? Its almost like you want to use a Grid that spans the full width of the screen but yet have a 3 column grid within? You could do that with flexbox and Grid.
Maybe you can take a different approach to explaining it?
I want a 3 column grid centered in the viewport contained with a max width (let’s say 1200px). That’s the easy part!
I also want the option to break that grid and extend a “project-tile” to the edge of the viewport.
With all that in mind, please scroll to the last section in the share link. My attempt here should show where the main issue arises. I’ve tried a 100vw grid with 7 columns; column 1 and 7 would act as my “extended” areas, the 5 in the middle act as my div “container” (3 columns for content and 2 for gaps). With this grid, I am now able to extend project-link divs to the edge. The problem is that the gaps do not line up with my original grid intention (shown immediately below).
What you are asking, is not directly feasible without some custom code.
Now I may be able to come up with a way, but at this point I dont think I can get what you are asking. Although I am not exactly sure why you would want to tho?
Can you provide a real world example or your reasoning behind this layout?
I could most likely work with the mix of flex and Absolute positioning, but without a direction for your concept path not sure what the benefit would be, TBH?
We’re currently redesigning our company website and would want this functionality. I’ve published the same share link and populated the page with something a bit closer to our desired layout for reference. As you can see, I’d like some images to span to the edges while still adhering to the initial grid within the container (with a max width) on the opposite side. The larger image on wide screens begins to span further than desired and breaks the alignment with everything else on the page.
I’ve mentioned it directly to Webflow support already, but it seems as if it’s a relatively easy fix on their end - all that needs to happen is a bit of streamlining of how the columns are dimensioned. Just as you would dimension a div, you could dimension a grid column: with a default width, a min width, and a max width. Currently, the default width of a grid column is being pulled from the Max value of the min/max dimensions. I’m not sure why dimensioning of the two elements wouldn’t be the same. The whole min/max thing throws me off.
The other potential change is to implement dimensioning of “groups” of columns, i.e. allowing me to select columns 2-6 and dimensioning that “group width.” I imagine this would be WAY more work for them though
Anyways, I appreciate any help you’re willing to throw my way!
The min max feature, is just what the min width you want the grid column to be set and vise versa for the max. But use the Auto-fit checkbox for the desired affect.
Ill have to dive into this deeper later, as I am headed out now.
