Glad you like it.
I’ve only recently been utilizing chaining in webflow and it’s completely changed my workflow. Here’s another example using grid + background and font color
Default screen size
Mobile landscape
Take note of: The right column doesnt have a default large screen size, it’s expanding based on the left column size (size-8) it only has a set width from tablet below as shown in the second screen shot. Also see how you can chain more classes together than just grid like background color, text color, and even spacing.
You can also add standardized spacing to this too like in the example above by creating a class that only has a set padding (or margin or whatever attribute you want). In the example above, padding-all-lg = padding all sides = 4rem
I love doing this method because when you export you wont get an insane amount of chained classes together. As long as you don’t make any edits in the UI they will be exported as global elements and not chained together keeping your code super light and dry.
Additionally - if you want to style something differently outside of the structured format do that class/styling first and then add the global class. It will all work the same.
Final note: for new people not familiar with bootstrap methodology make sure the total of all column sizes does not exceed 12, if it does it will push the column to the next row. Example size-6 + size-6 = 12, md-8+md-4=12, md-8 + md-8 = 16 (This will push the right column to the next row)
Happy building!