Page layouts are set for a revolution. We’re mostly waiting for the majority of browsers to support new layout technologies.
One of those technologies, CSS Flexbox, allows for easy placement and styling of navigation menus, image galleries, photograph thumbnails, centering objects, and so on. Basically, anything that designers would have thought should have straightforward with web design is now possible.
While Flexbox can handle the layout within portions of a page, true page layout design is a bit aways.
The technology powering page layouts, CSS Grids, is still awaiting for browser support.
However, the latest browser vendors are experimenting with the implementation of the CSS specification with new browser builds. What that means is that web designer and developers can turn them on for testing out cool new stuff like CSS grids!
Enabling Chrome Flags
In the Chrome browser, type in the web address chrome://flags/. This action results in a list of experimental browser features available to you.
NOTE: As the warning states at the top of the flags page, these features may go away at any time in a future release. Or worst, they might make your browser something you really do not want it to do like delete data, crash your browser, etc. It’s called experimental for a reason. If we stick to page capabilities, though, that should likely not be that much of a problem.
To turn on CSS Grids, scroll down to Experimental Web Platform features and select enable.
So that the features can take hold, the browser prompts you to restart the Chrome browser.
To make sure you have browser displaying CSS grids, check out Rachel Andrew’s Grid By Example lab making sure to check out each of her layout examples.
Learn More about CSS Grid
To hear Rachel Andrew’s thoughts on new layout technologies, listen to her interview on the next Non Breaking Space Show episode! Sign up for the The Non Breaking Space’s newsletter or subscribe via iTunes.