Day 6 - Making Grids
Today was about leveling up from last week’s layout chaos and learning a tool that helps use build sturdy pages; CSS Grid.
Things we talked about:
While everyone wrote impressive amounts of code and experimented with colors and fonts, there were some fundamental issues we needed to address such as invalid HTML tags, CSS issues and general good-practices. Maintainable code won’t make future-you hate present-you.
Inspired by Jen Simmons’ work, we discussed how web layout needs to evolve beyond templated, single-column designs. The web can learn from art direction principles of print and use that to communicate ideas through intentional organization of words and visuals. This also led us into a meta-discussion of who we are designing for, what our intent here is.
Flexbox taught us one-dimensional layouts (rows or columns), CSS Grid lets us work in both dimensions simultaneously. Grid gives you editorial control over space that web designers have been dreaming about for decades. We explored implicit vs. explicit grids, the magical
frunit (fractions of remaining space), and learnt how to use the various grid properties through CSS grid garden.
To cap off the day, we recreated a section from The New York Times website, building a layout from scratch. This involved writing semantic HTML structure, and using CSS Grid properties like grid-template-columns, grid-column, and introducing basic responsive design with media queries.
Today’s Links
CSS Grid Learning:
- Learn CSS Grid - Comprehensive visual guide to CSS Grid
- CSS Grid Garden - Interactive game to practice grid syntax
- A Complete Guide to Grid (CSS-Tricks)
Design Inspiration:
- Jen Simmons: Designing with Grid - The talk that inspired our art direction discussion
- Layout Land YouTube Channel - Jen Simmons explaining modern CSS layout
Git & Version Control:
- Git Handbook - GitHub’s intro to version control