CSS Grid is a two-dimensional layout system that lets you create complex layouts with rows and columns simultaneously. Unlike Flexbox which is one-dimensional, Grid works in both dimensions at once.

fr (fraction) is a flexible unit that represents a fraction of the available space. 1fr 2fr means the second column gets twice the space of the first.

When should I use Grid vs Flexbox?

Use Grid for page-level layouts with rows AND columns (headers, sidebars, content areas). Use Flexbox for component-level layouts in one direction (navigation bars, card rows, form controls).