CSS Grid: Yes we can be creative on web layouts
About the Author
Eduardo Rosa Iotti is a Brazilian Front-End developer, with an interesting background: Graduated in Advertising, carreer in graphic and user interface design and nowadays spends his days working as a staff front-end engineer at Petlove / DogHero.
CSS Grid: Creativity unleashed!
In this article i would like to show you some of the possibilities that css grid layouts brought to us in terms of experience, art direction and interface design for the web nowadays.
My background experiences granted me many experiences and I’ve started with that on purpose to give you a taste of where we’ll get in this atricle.
How we did back in the days?
Even though today we make jokes about table layouts, at some time using tables to build webpages was the mainstream methodology.
But, let’s skip this dark past and go further on to a more professional approach to state our mark zero:
The 12 cols: from 960.gs to Bootstrap
The first organized layout-structuring purpose that I’ve adopted was 960.gs, on both front-end and graphic design projects (oh those Adobe Photoshop gridline and guidelines templates…). Although the 12 column grid template had it’s peak with Bootstrap.
What kind of problem they solved
Just bring up old tools’s names is pointless. Lets focus on the problem they solved: Column layouts.
At that time we hadn’t native ways to approach this problem, which lead us to inconsistent solutions, specially when it comes to calculating column gap between different screen sizes and resolutions.
That’s until those frameworks stepped into the scene, providing us with utility classes for dealing with the complicated calculation issue.
But, then we created another problem
Even though the problem was solved, apparently, we got into other uncomfortable situation: Now we’re stuck in 12, or 16 columns with fixed spacing, column width, etc, etc.
Welcome to the era where creativity began to be murdered on web layouts. Now we can only solve user interfaces interactions with jumbotrons, 4 image-per-line galleries, bla bla bla…
So isn’t more space to be creative on web layouts? Is the graphic design dead for the web?
Used to be like this, until the arrival of CSS Grid layouts!
Now we have a native solution to lay out things on our screens and we can achieve it using this perfect and graphic design-leading combination: Creativity and engineering.
Let’s step out the web universe a little bit and define what is a “Grid”
Muller-Brockmann, One of the founding fathers of the grid concept declares “The use of the grid system implies the intention to systematize, to seek clarity, the intention to penetrate to the essential, to concentrate, the intention to cultivate objectivity instead of subjectivity, the intention to rationalize the creative and technical processes of production, the intention to integrate elements of color, form and material, the intention to achieve architectural mastery over surface and space […]”
Or we can say it on a non-philosophical way: Order surfaces and spaces inside grids means lay out texts, images and diagrams following objective and functional criteria.
We can go further and say that the responsive layout concept has in it’s own roots a well designed grid. And that said we must state: wel designed isn’t imposed (960.gs, bootstrap etc…)
Muller-Brockmann was a graphic designer from switzerland and very known for his published posters. Nowadays we can compare webpages directly to posters with an additional layer of interactivity and flexibility. CSS grid came to show us the way to achieve great compositions with creativity and functionality.
CSS Grid breaking changes
Units of measure: We don’t need to use % anymore, we can use fractions calculated by the grid itself with fr, ems and rems (preferably) for size references proportional to the screens we are working on.
Breakpoints: We no longer need to use breakpoints in the traditional way, grid functions such as auto fill, auto fit and minmax bring us flexibility to solve responsiveness issues and use media queries for specific and personalized situations.
Independent Speakers: No longer tied to 12 fixed columns or anything like that, we open the door to even more active collaboration with art direction, brand voice and user experience.
Graphic Desginer Jen Simmons, show us how easily we can achieve otherwise complex layouts through css grid.
Now we’re talking creativity!
The doors of creativity in terms of layout composition were opened by the CSS Grid that encourages us to create contextual layouts and experiences adapted according to the screen that is showing our interfaces.
Technically my favorite way to create adaptable experiences, and not have so many disagreements with variations and creative proposals from the design and marketing team, is using grid areas.
Where will we get?
We have in our hands the possibility of thinking together with user experience and interface designers new approaches to building layouts that can break the paradigm of 12 fixed columns and offer richer and more contextualized interactions, bringing graphic design closer to the user experience, user interface and, of course, its materialization through the front-end engineering!