A free, self-paced textbook in 7 chapters. Read a chapter, then drill it with the 202 companion flashcards using spaced repetition.
The most important question to answer before writing any layout CSS is whether the structure you need is one-dimensional or two-dimensional. Flexbox is a one-dimensional layout sys...
A flex container has two axes. The main axis is the direction children flow, controlled by \(flex-direction\) (with options \(row\), \(row-reverse\), \(column\), \(column-reverse\)...
A CSS grid is defined by declaring explicit tracks on its container. \(grid-template-columns: 200px 1fr 200px\) sets up two fixed sides and a flexible middle; \(grid-template-rows:...
Alignment in Flex and Grid shares the same vocabulary but applies slightly differently. \(justify-content\) distributes items along the main axis (Flex) or aligns the whole grid wi...
Two-column sidebars are the canonical comparison. In Grid, \(grid-template-columns: 250px 1fr;\) defines an explicit sidebar plus flexible main region. In Flex, the sidebar gets \(...
The simplest responsive switch is a media query on the grid template itself. A sidebar-plus-main layout collapses to a single column on mobile with \(@media (max-width: 768px) { gr...
Several pitfalls recur across flex and grid. As noted earlier, flex and grid items have an implicit \(min-width: auto\) (or \(min-height: auto\)) that prevents them from shrinking...