What is the difference between Flexbox and Grid?

Flexbox lays out items in one dimension (a row or column); CSS Grid lays out items in two dimensions (rows and columns). Use Grid for page layout and Flexbox for components.

How do I center a div?

With Flexbox: display:flex; justify-content:center; align-items:center on the parent. With Grid: display:grid; place-items:center.

Which CSS units should I use?

Use rem/em for scalable typography and spacing, % and fr for flexible layout, and px for fixed details. vw/vh relate to the viewport size.

What is the CSS box model?

Every element is a box of content, padding, border, and margin. box-sizing: border-box makes the declared width include padding and border.

How do specificity and !important work?

More specific selectors win (inline > id > class > element). !important overrides normal specificity and should be used sparingly.

trysys.jp

Reference

CSS Cheat Sheet

Essential CSS properties for modern web design. Click any card to copy.