A phenomenal teacher you are, with fabulous branding. That "T.RICKS" is simply one of the best I've ever seen, anywhere, in any sector. Keep up your incredible work.
Thanks for this - so helpful! Thoughts on how to make it work for a grid with uneven column widths? I'm working on something where the text side needs to be more like 1.5fr. When I set the columns to different widths, the edges of text within the grids don't line up with edges of text in non-grid (full-width) containers.
Thanks for the really useful explainer and the cloneable, massively helpful. Would love to know how to go about adjusting this for different column sizes whilst keeping the left one aligned. Been a real head scratcher for me for the past wee while!
Great video! How would you produce a photo breaking past a container using 25% (photo) and 75% (text)? Would you use 3/4 of the container's max-width instead of 1/2, or would that not translate?
You probably found a way to solve this over the past 10 months, but I've also been wondering the same. I've so far managed to achieve a decent result by changing the width of the container to whatever fraction of it I want it to be, (minus the extra rem for the column gap), then calculating the margin of it based on the user's viewport and the max-width of our container. So considering a container max-width of 80rem, and using your 25% as an example, our container would be 18rem, (including the 2rem we take away for column gap). Then I used custom code to set the container's margin-left to "calc((100vw - 80rem) / 2)". Doing this we get the user's screen size, take away the overall size of our container, giving a combined width of both of the margins either side, then we divide that by 2 to get the width of one margin. Then in the grid settings, I give my 18rem container a width of 0.25fr, and my bleeding container a width of 0.75fr. The caveat here is that you need to set up some rules for what happens when the screen sizes gets smaller than the container, in this case 1280px (80rem).
my solution was to set up a 14 column grid, use the outer two columns as padding and place the content inside the usual 12 columns and drag the image out into the padding column. Like this you can even have images aligning to complex 12 column layouts
You are definitely the final boss of Webflow.
A phenomenal teacher you are, with fabulous branding. That "T.RICKS" is simply one of the best I've ever seen, anywhere, in any sector. Keep up your incredible work.
.. is this satire? lmao 😆
@@JimmyTRUELOVE Definetely not. He is the one of the best teachers I ever know.
It's TRICKY!
Love the addition of the guides to help further explain the layout!
Timinator! You're a legend, this tutorial was great.
Thank you, Leon! So glad this helps!
Another magic! Wow! Thank you! Love your creative solutions!
A timely tutorial, thanks Tim
Thanks for this - so helpful! Thoughts on how to make it work for a grid with uneven column widths? I'm working on something where the text side needs to be more like 1.5fr. When I set the columns to different widths, the edges of text within the grids don't line up with edges of text in non-grid (full-width) containers.
Thanks for the really useful explainer and the cloneable, massively helpful. Would love to know how to go about adjusting this for different column sizes whilst keeping the left one aligned. Been a real head scratcher for me for the past wee while!
Solid TRICK tim! Thank you 💥💥💥
Thanks so much, Harshit!
interesting Tim, thanks for sharing! 👏🏻
Hey Timothy! Awesome tutorial, thank you very much.
Quick question, what's the logic behind dividing 1280 by 16EM at 0:57 ?
You are amazing!
Nice!
Excellent!
Great video! How would you produce a photo breaking past a container using 25% (photo) and 75% (text)? Would you use 3/4 of the container's max-width instead of 1/2, or would that not translate?
You probably found a way to solve this over the past 10 months, but I've also been wondering the same. I've so far managed to achieve a decent result by changing the width of the container to whatever fraction of it I want it to be, (minus the extra rem for the column gap), then calculating the margin of it based on the user's viewport and the max-width of our container.
So considering a container max-width of 80rem, and using your 25% as an example, our container would be 18rem, (including the 2rem we take away for column gap). Then I used custom code to set the container's margin-left to "calc((100vw - 80rem) / 2)". Doing this we get the user's screen size, take away the overall size of our container, giving a combined width of both of the margins either side, then we divide that by 2 to get the width of one margin. Then in the grid settings, I give my 18rem container a width of 0.25fr, and my bleeding container a width of 0.75fr.
The caveat here is that you need to set up some rules for what happens when the screen sizes gets smaller than the container, in this case 1280px (80rem).
my solution was to set up a 14 column grid, use the outer two columns as padding and place the content inside the usual 12 columns and drag the image out into the padding column. Like this you can even have images aligning to complex 12 column layouts
Nice! In that case, I guess you just wouldn’t use a max width on your grid.
@@timothyricks exactly
❤