4 CSS Grid math
This chapter covers
- Understanding the math that underlies CSS Grid
- Learning the Grid coordinate system
- Grokking the Grid track sizing algorithm
- Putting Grid’s track sizing functions to good use
It hard to even imagine it now, but there was a time not that long ago when a web designer’s go-to layout tool was — wait for it — an HTML table! It actually made a bit of sense at the time since a table provided structure and what web pages desperately needed in the early days was some sort of structure. Ah, but what a rigid, unforgiving scaffolding it was!
Those primitive days are happily behind us now that we have CSS Grid as the basic layout engine of the modern web (along with Flexbox, which I cover in chapter 5). But the power of CSS Grid comes at the cost of increased complexity, especially as the number of page components increases. But that complexity is fundamentally a math problem because what Grid is doing behind the scenes is using math to divide up your page. When you understand that math, which is the goal of this chapter, it suddenly becomes easier to create robust and creative layouts and to troubleshoot any Grid layout problems that arise.