Web developers have been struggling for years to build sites that look truly unique and fresh, while also making them SEO friendly, and easy to customise if used in a CMS. There’s often a trade-off to be made, with the designer frustrated their vision could not be realised the way they intended, or the client not happy with the lack of customisation that comes from having a ‘spanky’ looking site. CSS grid, a layout system with rows and columns, attempts to address many of these issues.
Here are just four examples of how using the newest form of CSS layout can benefit all parties….as long as you don’t mind not supporting IE9 (yes, people still think it’s a thing).
Create advanced, magazine style layouts
Advanced layouts can certainly be created using older CSS properties, but grid allows you to create them within minutes, and with just a few lines of code.
Here is an example of a very modern layout being seen more and more on the web now, and this trend will only get bigger over the next year or so. Until recently this might have been created as an image (not great for SEO), but can now be built easily with CSS grid.
You can see on the right the grid that has been created to house the elements. The grid will automatically try to fit the content within it, or allow you to move elements around it to any cell you wish, or even overlap elements. So you can create some really interesting layouts without pulling your hair out.
Grid separates markup from layout
Another common issue when converting a design to build are the SEO concerns the marketing team may have. Perhaps a design has a big hero image with a gallery below it, resulting in the page headings and copy being pushed further down the page order, even though they are more valuable for search.
With CSS grid you can keep your markup in the order that will benefit search most, but can then move the elements to any row or cell where the designer wanted them to be regardless of the HTML markup order. Getting the best of both worlds, and also being great for accessibility
No need for frameworks
It’s common for developers to turn to frameworks such as Foundation or Bootstrap to enable them to quickly build layouts with multiple, varying columns, that will all break down nicely to mobile. And though there is still definitely a place for these in site build, they also come with a lot of extra files and plugins that you don’t necessarily need for you project. If, as a developer you find yourself only ever using the column grid you should consider using CSS grid instead. Yes you will have to create the CSS for the columns yourself, but it would take mere minutes to do so, and the saving on page weight from not having to load all those files will definitely be felt by the end-user.
In only a few lines of code you can create that 12 column grid you used to rely on a framework to do.
It means you can 100% rely on it working, whereas with frameworks you might find that one day in the future it just stops working, as the CDN files you linked to have been removed.
No need for media queries with ‘Minmax’
With any site you are going to get a few (sometimes lots of) media queries which tell the browser how you want to change the layout at certain screen sizes. So if you have a row of five images in a gallery on desktop you might want to stack those in one column for mobile, which is a common layout. It means having to fish through multiple areas of your stylesheet to change how they will layout, or if you are using a framework you might want to overwrite it’s default column styling, which can be tedious.
CSS grid can bypass the need for all these media queries as it has a feature called “minmax” which, as the name suggests allows you to set a maximum and minimum width for an element to stretch to. Once all the items in a row get below their minimum width, they will start to stack automatically.
You can find an example on the site of Jen Simmons. This shows a familiar ecommerce layout, which stacks when needed down to mobile, using only one css class to achieve it.
Obviously media queries are still probably required for other general site styling, but grid can definitely alleviate the amount of it needed, making file sizes much lower.
There are many more reasons to add to this list, but the takeaway is that it’s important for agencies to identify the newest and best ways to build sites for their clients, but also so the clients can read about the benefits of dropping support for older browsers, but do so after checking the clients analytics for their customers browser usage (if a lot of them still use IE8 you have to keep supporting it). Using new technologies to improve designs, user experience, accessibility and optimisation should always be at the forefront of agency thinking. CSS Grid will future-proof your site for many years to come. It’s flexibility will make your designer, developer, and search specialist very happy!
Posted 18 January 2018 by Shaun Levett