CSS Layouts — Using Flex-Wrap To Get Off The Grid

First off let me just clarify, when I’m talking about grids here, I’m NOT talking about the “CSS3 Grid Layout Module”. I am referring to the layout concept of dividing the width of a page into a fixed number of sub-units such as twelfths of the screen width, a pre-determined max-width, or breaking things up by fractions of 960 pixels.

Back in the ‘00’s the biggest problem with layouts was how people created them as a fixed width. Grids became a part of this where one of the most common questions being “what width should I design for”. The most common answers being either 768px for 800px friendly, or 960px for 1024px friendly. Basically taking 32 or 64px off to make room for scrollbars.

This mindset is flawed because:

1. Pixels are NOT an accessible font metric, no matter how many lame excuses or out of context misinterpretations of the WCAG claim otherwise. PX doesn’t auto-scale to the user preference which is why all layout: font-size; line-height; padding; margins; width; and media queries should be done in EM whenever and wherever possible!
2. Thinking in fixed widths means nobody’s thinking, since displays come in all sizes and shapes. Your layout should be able to auto adjust to this by being fluid. Automatically sizing to fit the available space.

Responsive layout — by way of media queries — came along to fix this, but people still THINK in terms of fixed widths. Instead of designing elastic (in EM) and fluid (dynamic width) they think of their media query breakpoints as a bunch of predetermined widths using the grid mentality.

Sometimes sure, certain elements should have a maximum width. It aids in preventing long lines of text being hard to follow (seriously, do you want to try and find the next line of a 6 line paragraph at a full 4k display width of 3840px?!? hell no!) or dividing things up into more digestible sub-sections for side-by-side display. But that’s MAXIMUM width, not a fixed width. Hence the idea known as semi-fluid design, where you have a max-width but the container is allowed to shrink below that if need be.

This idea of thinking of the page as a bunch of separate fixed width layouts controlled by media queries really results in a more convoluted codebase than need be…