Since March when all the major browsers, minus Internet Explorer of course, launched CSS grid there has been blog after blog about the CSS grid and how it works. Well not only am I going to take a dive into that, but more importantly, I’m going to explain how this is going to benefit businesses, developers and customers.
Let’s start with the obvious – development. Not only is this changing how we are going to develop a website but now we have even more control, or dare I say, unlimited control.Full Control for DevelopersFrameworks, like Bootstrap for example, set the tone. They created a foundation to build upon that worked responsively and across all browsers – a guide if you will. But this guide like all others had restrictions. You were forced into using specific layouts and stayed stuck within that layout. Sure, you could nest columns to try and break away from the standard, but it was still limiting.
Now with the CSS grid you have full control. You can have multiple grids per page, however many columns you need and you have control of both column and row gutters. You still have the ability to nest, which will help with the module components, but you aren’t stuck to just 12, 16 or even 24 column layouts.
Another development standout is less HTML markup. So long to the rows, columns, nested rows and nested columns, the multiple classes defining position not only for desktop, but for tablet and mobile as well. All this is now done through CSS by just defining a grid column and grid row. No longer is there a need for column spans and offsets. This is something you can now apply to the module itself using CSS. What does less HTML markup mean for the client and user? Faster page loads which of course is something we all strive for.Creative Freedom for UX and DesignNow let’s talk about UX and how the CSS grid will change the way UX is perceived. Normally when UX is going through the steps, they take into consideration the framework and they find the best solution for user experience under those guidelines. Now with the grid, we take those guidelines out of the equation. Just using CSS, we will be able to position any and all modules both horizontally AND vertically (something we’ve never been able to do before) to be able to create more complex layouts and give the user a better overall experience.
How about design, you ask? Gone are the days of the modules and space adding up to 12 columns, float here, float there and the struggle of what happens to the design when going from desktop to tablet to mobile. Functionality will still have to be controlled, but layouts on the other hand are free rein.New Opportunities for Strategy and MarketingWhat does the grid have to do with strategy and marketing? Because the grid lets you have complete control of where the content is placed by the CSS attributes versus HTML markup, this allows us to structure the HTML in a way that the higher priority content can be at the beginning of a page without effecting page layout. This will also help how a page is indexed and reviewed by Google and other search engines.
These are just a couple of the many benefits I’ve noticed with CSS grid. However, you can see how this new technology is not just helping development, but how it is helping many business departments shape the future of the web.
Primacy Blog