Here’s Kevin Powell again with what I look at as a solid Flexbox companion piece to the video Una Kravets made about CSS Grid. It goes over 3 responsive design/layout patterns that also obviate the need for media queries in your CSS.

• even columns: This layout gives us columns that have the same width and don’t shrink/grow based on their content.
• grid-ish: This one gives us a grid with rows and columns. The rows stretch so that if they differ in column number, they’re still the same width (3 columns on top have the same width as 2 columns below).
• content & sidebar: A classic layout, but this time with minimum and maximum widths based on the number of characters they should contain, not a container-based width.
• spacing things out: A surprise and bonus – gap now applies to Flexbox and columns!

And here’s the link to the post with Una’s CSS Grid video:

• 10 modern layouts in 1 line of CSS