The Evolution of Layouts on the Web
Stiff and Inflexible Layouts
Then, pretty quickly, folks wanted more out of this technology and started designing layouts. The only tools available to us at the time were tables (think Excel-type grids). The implementation was very stiff and inflexible, but you could align content in columns and other fun stuff.
We discovered in the early 2000’s that we could have text wrap around content blocks using CSS Floats. Floating an element is akin to “aligning” it, like left-, center- or right-aligning text, but having the ability to do this with entire sections of content and pictures! This turned out to be revolutionary and it allowed designers to create more flexible and desirable page designs. This approach was used for quite a long time – about 15 years. Tables and Floats were the way of the web.
There were an awful lot of quirks in every browser in terms of how the end result was rendered, causing web developers no end of teeth gnashing and hair pulling to get the same look for all browsers. One could call it job security, but we all called it what it was … just painful.
When mobile devices started coming to the forefront, tables turned out to be too inflexible. This got folks thinking about the next steps for web design. In 2008-2009, the Flexbox model was conceived. It tossed Tables and Floats to the wind and started over from scratch. By 2015, all modern web browsers supported this new technology, and most designers were using it for their websites across the web.
So, what is Flexbox? Flexbox is a layout model. It allows you to create full page layouts, as well as drill down and manage individual bits of content. You could make a two-column layout, or a full blown, two-dimensional table-like layout (aka a grid). In the end, it looked exactly like before, but was easier to build, required much less code, was far more robust and worked on all browsers pretty much the same way.
For the first time, web designers and developers could focus on churning out beautiful designs rather than getting mired down in the technical details of cross-browser compatibility. All we had to start worrying about was how to make the site look good on an iPhone as well as a large desktop monitor.
CSS Grid to the Rescue
The Microsoft community started thinking in different terms, because they were still in the throes of the never ending “browser wars.” By 2010, it was widely recognized that the Internet Explorer browsers were a beast of their own and Microsoft was always trying to reinvent the wheel to “win” the battle. Around 2011 or so, many folks from Microsoft (and others) put out the idea of CSS Grid. By 2017 CSS Grid became widely adopted by all browsers and developers.
CSS Grid is exactly what it sounds like. It’s a layout method designed for two dimensional representations of information (aka an Excel-like table). We certainly had this ability with Flexbox, but CSS grid focused on it and took it to new levels. Much like Flexbox, CSS Grid offers designers a quick and easy way to create beautiful layouts that work on all platforms and browsers.
So Long, Teeth Gnashing
You can create a page layout with CSS Grid and use Flexbox inside the grid elements. No more teeth gnashing and hair pulling. Nice layouts work well, making it so we can all focus on conveying the message, rather than on building large scaffoldings.
So far, front-end developers and designers have been hammering away at the web for a bit more than 20 years. It’s been an amazing learning process that was quite fun from my perspective. I’m looking forward to seeing what the next 20 years will bring us as I continue to work at our Scottsdale advertising agency.