Grid Text Layout

Technical Goal:

CSS Grids are here! They launched in Chrome and Firefox recently and are coming soon in Edge. I haven't been this excited for the future of web layout in a very long time. Grids have 18 properties that can be manipulated. With Grid and Flexbox in our took kits we will be able to make all kinds of new things. It is going to take a while to fully understand them, but I decided I wanted to play with CSS text direction, grid layout, and feature queries to make an interesting text-only layout that falls back to regular looking text in older browsers. Another technical goal was to play with the grid layout tools that are available only in Firefox's web inspector and get a feel for them.


CodePen Demo