At An Event Apart Chicago 2018, Rachel Andrew of Perch and the CSS Working Group argued that the new developments in CSS need not be scary but can be exciting and empowering. Here are my notes and to-dos.
When considering CSS Grid and other new layout methods it’s important to have a good grasp of core CSS principles such as the cascade, inheritance and specificity.
Remember that we can use grid for inner components (e.g. an image gallery or media object) rather than just thinking of it in terms of overall layout.
When it gets confusing or feels complicated, remember that it‘s all just a grid of lines.
We have an inline dimension/axis and a block dimension/axis. (Note: in flex we instead talk about the main axis and cross axis.)
CSS sizing: there are content-based “intrinsic” sizes and context-based "extrinsic" sizes.
Understand max-content and min-content.
In grid, named areas can be reused when positioning content within. And by using a convention like content-start paired with content-end we make available a grid-area called content that we can easily reference to place our content in that area / between those gridlines.
Full stop character creates an empty cell.
Avoid polyfilling grid (especially as many of the browsers which don’t support grid are used in places where data is more expensive and devices less powerful).
You don’t need a framework for layout. Solve your specific problems rather than inheriting (and forcing your users to download) solutions to the world’s generic problems.
Use Feature Queries before using a feature (such as grid) that may not be supported.
