ISE Blog

ConFoo 2018: CSS-Grid

ConFoo2018-2Before you ask, no I don’t know why the conference is named ConFoo, but I can tell you what ConFoo is. The Confoo Conference is an international conference focusing on various aspects of web development. It began as a conference focusing strictly on PHP programming, but in the 15 years since its conception Yann Larrivée, the conference’s founder, has grown it into a developer-focused colloquium focusing on multiple technologies, the majority being used within a web-development context.

I headed into ConFoo with the intention of focusing on learning more about the areas of web security and JavaScript, but surprisingly one of the best talks I attended** was about a cutting edge CSS feature that alleviates the pain of laying out a website with CSS: CSS-Grid.

The Traditional Approach: CSS Float

Before diving into the CSS-Grid feature, let’s take a look at how a website layout has been done prior to this. Many of you will remember the times where web developers would structure their web pages as a ginormous table, putting each separate piece of the website into table rows or columns. This led to brittle websites that would take an enormous effort to refactor if anything was to be added. (I should mention here that if you are still designing web pages this way, please stop. There are much better ways of laying out a website.)

So along came the practice of using float to layout pages. The CSS float attribute allows developers to push elements to one side of the page or the other; but as it was never intended to be used as a way to layout whole web pages, it quickly became obvious that it is not the ideal solution -- even if it is better than using a table layout.

To combat these frustrations, CSS libraries, like bootstrap, were designed with a hierarchy of classes that would essentially create a grid-like layout. This has become a good option to layout a website, but is still somewhat limited by the capabilities of the library, and modifying the built in rules can get hairy pretty quick. Plus, the non-native CSS support isn’t ideal, as you must include the library styles on every html page you serve, increasing server overhead.

A Step Forward: CSS3 Flexbox

Then, CSS stepped up its game with the release of CSS3. This introduced the flexbox property to the world which will dynamically resize components for you. This really hit on some pain points previously experienced by developers, such as reordering boxes on screen resizing, vertically centering elements, and creating elements with equal heights, and also abated some developer anxiety about supporting the plethora of different mobile views; however, it was never intended to be used to layout whole websites and, as a consequence, limits developers into choosing to either layout their site (primarily) vertically or horizontally. 

Layout using flexbox


Layout using CSS-Grid

Layout using flexbox   Layout using CSS-Grid

The Modern Approach: CSS-Grid

But finally, CSS-Grid has arrived! CSS-Grid allows developers to truly layout their websites correctly and with the flexibility that the modern era of mobile devices requires. Developers can now stop misusing the flexbox property for layout, instead use it for user interaction as it was intended and leaving the responsibility for laying out the webpage to grid. It also allows developers to lay websites out in two dimensions, as seen in the rightmost diagram above (source: Grid by Example). This layout, while not unthinkable with other CSS properties, would have required a lot of work and customization, but with grid, it’s easy. Finally, probably the best part about grid, is that it is built in to the CSS specification, so there’s no need for the overhead of keeping your CSS library up to date and including it everywhere in your site. It really is everything we’ve been waiting for in a CSS property.

The only downside to CSS-Grid, is the support for the specification. While it is supported in Chrome and Firefox, there is only partial support in Internet Explorer 10 and 11, Edge 12-15, and IE Mobile 10+. It is not supported on older versions of these, or the Opera mobile browser or Blackberry’s mobile browser.

So, while CSS-Grid is definitely the future for website layout, if you need to support IE be wary – and sit on the edge of your seat for when you can stop supporting old IE versions and start using CSS-Grid.

** The talk was delivered by Jen Kramer, a lecturer at Harvard University Extension School in the Master’s of Liberal Arts in Digital Media Design programs. 

Do you have experience with CSS-Grid?  What are your thoughts?  Join in the conversation below! 

Jon Opdahl, Software Engineer

Jon Opdahl, Software Engineer

Jon Opdahl is a full-stack web developer and web technology practice lead at Innovative Software Engineering. He has been with ISE since June of 2017. Fascinated with JavaScript, he loves working with Node.js and front-end frameworks like React and Angular. He is passionate about designing meaningful software that engages users and drives business. Outside of work, he is an avid baseball and hockey fan and enjoys golfing and tennis, as well as spending time with his wife.