Раскладка — Flexbox, Grid, позиционирование

Flexbox — раскладка по одной оси: строка кнопок, шапка, выравнивание по центру. Grid — по двум осям: сетка карточек, каркас страницы.

.toolbar { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.cards   { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

Что важно знать

• Flex: главная и поперечная оси, flex: 1 (grow, shrink, basis), flex-wrap, почему элемент «не сжимается» (min-width: auto — лечится min-width: 0).
• Grid: fr, repeat, minmax, auto-fill против auto-fit, именованные области grid-template-areas.
• gap работает и во Flexbox, и в Grid — отступы между элементами без margin.
• position: relative — сдвиг и точка отсчёта для потомков, absolute — от ближайшего позиционированного предка, fixed — от окна, sticky — прилипает при прокрутке внутри родителя.
• z-index работает внутри контекста наложения; новый контекст создают position с z-index, opacity < 1, transform.