vvhouse

admin May 24, 2026

Get Started

These columns are responsive without the use of media queries! Inspect each one and set its Flex Basis to the minimum width you would like them to maintain (when possible). Flexbox will take care of the rest and wrap your children when necessary.

Explore Further

Setting Flex Grow to 1 means that your columns should try to take up all available space when possible. Setting it to 0 will mean that your columns maintain their original intended dimensions.

Have Fun

Try out different Flex values on the columns themselves, and then experiment with different Flex Layouts on the bar—You'll be amazed at the possibilities (you'll notice the columns are equal height as well)! Also, you can orient the content in these columns independently as well. The options are truly limitless.

This column is always full-width.

Making it great for a big call to action (like this).

Learn More