Apocalyptic Ebb and Flow

In the beginning, there was the flow (i.e., the natural flow a website took, with one element right after another in endless succession). It was like putting the human resistance army into one long, single-file line. It worked okay, but it wasn’t pretty or efficient, and readability was terrible on wide screens.

Apocalyptic tables

Then came tables. They were far better at laying out content and, with some software tools to write the complex code for you. You could also build interesting and vibrant layouts. They were exact, pixel perfect, and worked well across browsers. However, even with only a handful of screen sizes, they struggled due to their inflexibility. You could make them look great at one size, but if a visitor’s screen was a different size, the site would be too small or, worse, too big. Without the responsive techniques that we have today, too big meant a lot of scrolling to find what you were looking for. Tables also failed to separate style and content. Keeping style and content separate, in theory, allows us to keep the same HTML and change the look and feel of a page. When the layout is built into the HTML, you have to rewrite the HTML whenever you want to change the layout.

Apocalyptic float and position

Then came CSS. You could use two properties for layouts: float and position. Each of them had its strengths and weaknesses and, in a responsive design world, the weaknesses showed through badly. Floats were great for two-column displays, but it was difficult to create anything more complex than that. It was even harder to maintain, particularly when you have to account for multiple screen sizes. Positioning allowed you to be very precise with where you put pieces of content, but it was also rigid and didn’t respond well to the screen-size ecosystem that web designers and developers must deal with today. It was too rigid for complex layouts in a responsive world. While usable, it was difficult to adapt between phone, tablet, and desktop screens.

Revolutionary columns, flexbox, and grid

Neither floats nor positioning could handle centering easily, especially vertical centering. Thus, the human resistance deities, which are the people who write the CSS specifications created new layout forms. First came CSS columns, then flexbox, and then grid. All are excellent tools for creating complex layouts, and you can even use them in combination. All have their strengths and weaknesses that need to be considered. And, like a baseball bat to a rogue zombie or an airstrike to an oncoming horde, using the right tool for the job will make your post-apocalyptic life much longer and more enjoyable. Let’s see how these methods stack up against each other.