1. The Fundamental Decision
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...
Read full chapter →The essential CSS Grid Vs Flexbox When To Use Which cheat sheet: 7 concise chapters you can read in minutes, distilled from the full deck. When you're ready, drill the flashcards or test yourself under exam conditions.
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...
Read full chapter →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\)...
Read full chapter →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:...
Read full chapter →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...
Read full chapter →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 \(...
Read full chapter →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...
Read full chapter →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...
Read full chapter →Done reading?
Test yourself with the CSS Grid Vs Flexbox When To Use Which practice exam — timed questions, instant score, full review of wrong answers. Free.
🎯 Take the Practice Exam →