Flexbox is best when items need to be arranged along one axis, such as a row of navigation links or a vertical stack of cards. It controls alignment, spacing, wrapping, and distribution with properties like $justify-content$, $align-items$, and $gap$.

CSS Grid is ideal for layouts that need rows and columns simultaneously, such as dashboards, galleries, and full page structures. It can define tracks using units like $fr$, as well as named areas for readable placement.

Responsive design combines fluid measurements, flexible media, and breakpoints so layouts adapt across devices. Relative units like $\%$, $rem$, $vw$, and $vh$ help elements scale more naturally than fixed pixels in many cases.

Media queries let you apply different styles based on conditions such as viewport width. A mobile-first approach starts with a simple base layout and layers enhancements as the screen gets larger.