a:hover color: red; li:first-child font-weight: bold; input:focus outline: 2px solid blue;

Use Flexbox for components (navigation, card lists, form groups). Use Grid for page layout (header, sidebar, main, footer). They work beautifully together.

(e.g., .nav-item , [type="text"] , :hover ).

Every single element on a web page is a rectangular box. Even if an item looks round due to border-radius , the browser still calculates it as a rectangle. Truly mastering CSS layouts requires mastering this box. The box model consists of four distinct layers: The text, image, or video inside the element.

Confidence often breaks down when elements don't sit where we expect. This is usually a misunderstanding of :

.cards-grid display: grid; gap: 1.5rem; /* mobile: single column */ grid-template-columns: 1fr;