CSS Grid and the Evolution of Web Design
Issue 23
The leap from the Lumière Brothers to Industrial Light & Magic didn’t happen overnight for the film industry. It didn’t happen 20 years after the brothers held their first private film screening, which took place, according to Wikipedia, in 1895. It took 80 years of technological innovation and growth in film to lay the foundation for George Lucas to open the doors to his visual effects company, so he could realize the world of Star Wars.
The digital design and tech industry are fairly young, and still evolving. While headlines about artificial intelligence, assistive technology, chat bots, and immersive experiences capture our imagination (and sometimes fears) of an automated future, recent changes in CSS offer something quite different: an opportunity to break free from the creative and aesthetic constraints of traditional web design layouts and templates that have become all too familiar.
In this issue, we explore the possibilities in web design layout that CSS grid and Flexbox offer. Designers can take inspiration for the first time from graphic design principles and techniques present in everything from classic Japanese design to the Swiss modernists, and more. We also explore the potential pitfalls in accessibility that CSS Grid and Flexbox contain for less careful designers and developers.
Jen Simmons traces the early days of design on the web, from the simple, gray background and blue text links of those first websites to the era of tables, the introduction of CSS, now more than 20 years old, to responsive design, frameworks like Bootstrap and 960 Grid, and the comfort we’ve fallen into using layouts so uniform to be parodied.
The progression looks a little like this:
- The no-layout, layout
- Table-based layouts
- Hand-coded, float layouts
- Framework Layouts
- …CSS Grid and Flexbox
As Jen is quick to point out, templates and frameworks have a place. They serve an important purpose and streamline development. The frameworks we’ve developed have helped us over time evolve and push past the limitations of those early days in web design. But we can’t assume that all websites share the same design solutions, and now that we have the ability to play layouts using CSS Grid and Flexbox, they don’t have to be.
What do Grid and Flexbox allow?
CSS Grid
The main headline for CSS grid is that it is responsive in two directions, and a layout will look great no matter what aspect ratio the viewport is. Designers can define columns and rows, and where on the grid they want them to start. (But if they don’t define them, the browser will do it for them.) Items can be overlapped on the grid.
Jen notes that one thing designers will need to adjust to is that the grid numbers relate to line numbers between the tracks and not the tracks themselves.
Flexbox
Flexbox lines up items in one direction within a container, and as CSS-Tricks notes, it is generally good for small-scale layouts, while grid can tackle the larger stuff.
CSS Grid, Flexbox, Alignment, Multicolumn, and Writing Modes allow design professionals to think more creatively about the solutions they develop. Designers can now play with vertical white space, because they have the ability to create rows and define spacing in a vertical direction.
They can explore concepts like asymmetry in design, and visual hierarchy that draws the eye toward something other than the top left corner of the page, explains Jen.
Jen dives deep into the properties of Flexbox and Grid, and the potential to explore new layouts in her virtual seminar, such as how to use Alignment and Viewport units to peg items in a Flexbox container or measure and resize them. She reviews how fraction units are used in grid, how to define minimum and maximum content, and more.
READ: A Super Quick Way to Try out CSS Grid by Jen Simmons
