Flexbox and CSS Grids — Design Agency Newcastle

Working with CSS for a website’s layout has always been a little bit hacky. Not that using floats or display: inline-block; haven’t served their purpose, it’s just they aren’t the right tools for job; they were never meant to be used for layout and structure. In the past, there have been many workarounds to make a website look like it has structure, some of which had some pros but a higher number of cons.

The ‘stick everything in a table’ layout

At the dawn of CSS, tables were the go-to for web layout. Wrap your site in a table and then use spacer images in rows and columns, combined with your content, to make things look pretty. Back then websites didn’t need to be responsive as there were a very limited number of devices to view the web on. That meant setting fixed pixel widths on the columns and rows was ideal to ensure everything was perfect. Easy! Right? Tables for layout is not easy and most definitely not ideal. Trust me.

The ‘absolutely position EVERTHING’ layout

Tables was a good concept but didn’t really work the way we needed them to. Step in ‘position: absolute’. Using absolute positioning (mixed with explicit heights and widths on your content) was perfect because you could set exactly where things needed to be on the page without worrying about tables fluffing up on you and causing weird layout issues. Instead you had to deal with browser support and a host of different weird layout issues resulting from ‘absolute’ elements not sitting in the website in the same way normal elements do. What’s that? The Responsive Web is coming? Uh oh, there goes that one. Surely there’s something better than this!

The ‘float and clear’ layout

Floats and clears have been a staple in website layout for a long time now. Not only are they somewhat (using that term pretty loosely) predictable in how they operate, they work more reliably across a larger number of browsers* and perform well in a responsive website. You can create a three column grid using ‘float: left, width: 33.3%’ on your column elements so long as you clear the parent div correctly to push any following content below it. One of the problems with floats is that it only really works as a ‘one dimensional’ grid, but more on that shortly.

* — Not so much in the old IE6!

The ‘display: inline-block’ layout

If floats and clears aren’t your thing then ‘display: inline-block’ is a good alternative. This method takes your block level elements and allows them to sit beside each other (where the widths permit) without requiring floats and clears. One of the issues with inline-block is that is doesn’t ignore the spaces left in your HTML markup which can lead to some box model issues.

Flexbox and Grids

The specs for both Flexbox and CSS Grids have been bubbling away for quite a while so the implementation and syntax could be firmed up and implemented. In that time, developers everywhere were chomping at the bit for both to be readily available in browsers and, more importantly, well supported. As it stands at the moment, the latest versions of most modern browsers now support Flexbox and CSS Grids (Chrome, FireFox, Safari and Opera) however Internet Explorer (< IE11 and Edge) is behind with CSS Grids meaning alternatives need to be in place where support is spotty. Tools like modernizr.js for browser feature detection is great at solving this problem as it allows you to target specific features in your CSS to ensure the right browsers get the right layout. Modernizr.js adds a series of classes to your tag which you can then use in your CSS, for example, the class of ‘flexbox’ is added when the browser supports Flexbox rules, if it doesn’t, the class of ‘no-flexbox’ is added.

OK, so…Flexbox?

In the last year or so browser support for Flexbox got to a point where it was much safer to use without polyfills and unexpected bugs cropping up left, right and centre. This support was a great step forward in CSS layout as Flexbox is incredibly useful in keeping your website nice and tidy. Flexbox’s main use is to replace the need for inline-block and float based layout, which makes it perfect for navigation elements, basic column grids and pretty much any content that has a requirement to be fluid across multiple screen sizes. It even allows you to re-order elements on the page meaning that your element source order doesn’t need to be followed to rigidly. If you have a row of call to actions and want them to be the exact same width with the same margins, bye bye floats, hello Flexbox. Want the row of call to actions to also be the same height? Not a problem! You don’t even need to use Javascript for it anymore! Flexbox can work in rows or in columns using either ‘flex-direction: row’ or ‘flex-direction: column’ respectively. We have been using Flexbox on our websites since the browser support stabilised and we haven’t looked back. In older browsers where the support isn’t quite there we gracefully degrade to floats to maintain as close a user experience as we can.

Flexbox sounds pretty cool, what does CSS Grids do?

CSS Grids allow you to lay out your website in a way that maintains structure from top to bottom. Imagine you have a header, a left sidebar, a main content area, a right sidebar and then a footer to your website. The header and footer are both 100% width and they sit at the top and bottom of the rest of the content, both sidebars are 20% width and the main content area is 60% width but sits between the sidebars. That’s a lot of floats and clearing to do to maintain the layout. With CSS grids is a few lines of CSS with no fuss. That’s just one, very basic, example of using CSS Grids. Suffice it to say that deep diving into CSS Grids shows a lot of potential in keeping responsive layouts easier to manage and much more reliable across the supporting browsers. So why do we have CSS Grids now too if Flexbox can do a similar thing?

It’s all about dimensions

Flexbox allows you to control one-dimensional layout; left to right or top to bottom. Although it can be used to create basic grids, it’s power lies within those confines. CSS Grids are two-dimensional so you can control left to right AND top to bottom at the same time using strict rows and columns. Imagine an HTML table on steroids without any of the HTML markup and only using CSS. We’re in the process of updating the Cargo site from it’s current ‘float’ and ‘inline-block’ layouts in favour of CSS Grids so stay tuned to see how it goes.

CSS Grid Resources

• http://cssgridgarden.com/ — A browser game to explain CSS Grids
• https://rachelandrew.co.uk/archives/2017/01/18/css-grid-one-layout-method-not-the-only-layout-method/ — A great CSS Grids explanation post by Rachel Andrew
• http://gridbyexample.com/examples/ — CSS Grid Examples, UI Patterns and Tutorials
• https://css-tricks.com/snippets/css/complete-guide-grid/ — The CSS Tricks complete CSS Grids guide

Originally published at https://www.cargocreative.co.uk on April 11, 2017.