1. Define a constraint 2. Create a unit based on it 3. Create the grid based on the unit
12
2. Using grids
13
Derive your layout from your type. Create your grid using Ems.
14
The size and proportion of the characters within this square differ greatly
15
Hanging elements
16
Padding vs gutters
17
Hanging lines
18
Dead columns
Description:
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.
Designing Grids - Beyond 12 Columns for Modern Web Layouts