Designing Grids - Beyond 12 Columns for Modern Web Layouts

Explore the intricacies of grid design for modern web layouts in this insightful conference talk from CSS Day 2017. Delve into grid design theory and its practical applications, moving beyond the conventional 12-column approach. Learn systematic decision-making processes for grid design and layout, discover how to create connectedness between design elements, and understand how a well-designed grid can solve various design challenges. Bridge the gap between grid design theory and contemporary web design with actionable insights. Gain knowledge on topics such as uneven columns, gutterless grids, compound grids, axial grids, and modular grids. Understand the importance of defining constraints, creating units, and deriving layouts from typography. Explore advanced concepts like hanging elements, padding vs. gutters, hanging lines, and dead columns. Apply these principles to elevate your web designs and potentially influence the future of web layout for the next decade.

Syllabus

Intro
Just good decisions
Twelve Columns
1. Designing grids
Content out
Uneven columns
Gutterless grid
Compound grid
Axial grids
Modular grids
1. Define a constraint 2. Create a unit based on it 3. Create the grid based on the unit
2. Using grids
Derive your layout from your type. Create your grid using Ems.
The size and proportion of the characters within this square differ greatly
Hanging elements
Padding vs gutters
Hanging lines
Dead columns