Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Flex Wrap Fluid Columns

Solution: Flex Wrap Fluid Columns

Let’s create a responsive two-column layout that wraps on narrow screens, ensuring columns are equal height and fluid using Flexbox.

We'll cover the following...

Problem description

A .container contains multiple .column items. You must display them in two equal height columns that wrap to a single column on screens narrower than 600px.

Complete solution

The following coding playground contains the solution to the above-mentioned problem:

Solution explanation

...