Grid Experiments

Posted to Words: January 8, 2020

The new CSS has radical new features that make layout on the web much more capable and efficient to write. There is a bit of a learning curve that comes with CSS grid in particular. One of the best ways to learn is to run little experiments.

If you are interested in trying one of these yourself the best thing to do is to find a historical example of a print layout like something from the Bauhaus. Write the HTML in a semantic fashion and then apply styles you can learn about from A Complete Guide to Grid on CSS-Tricks and Layout Land on YouTube.

Bauhaus Postcard Reproduction:

See the Pen CSS Grid Postcard (Responsive) by Andrew Paul Browne (@andypbrowne) on CodePen.

A diagram for a really famous design process. This experiment really makes me think hard about how we should make information graphics and what kind of dyanmic and interactive features could be included when they are make this way.

See the Pen The Double Diamond by Andrew Paul Browne (@andypbrowne) on CodePen.


See Also