CSS Flexbox и Grid
Покрутите свойства Flexbox и Grid и сразу видите, как меняется раскладка. Снизу — готовый CSS, который можно скопировать. Лучший способ понять вёрстку. Работает прямо в браузере.
1
2
3
4
5
CSS
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
gap: 12px;
}Flexbox и Grid
Flexbox раскладывает элементы в одну линию (строку или столбец) и удобен для выравнивания: justify-content распределяет вдоль основной оси, align-items — поперёк. Grid задаёт двумерную сетку из строк и колонок — подходит для разметки страниц. Меняйте свойства и смотрите на результат: так раскладка запоминается гораздо быстрее, чем по описанию.
