Разбор раскладки: что не так

Урок 3.8 · Интерфейсы и сайты с нуля · Модуль 3. Раскладка: из блоков в страницу · По подписке

Цель урока: Научиться находить причину, почему карточки не встали в ряд.

Нужно знать заранее: Урок 3.2

Объяснение

Зачем это нужно: Раскладка ломается не от сложного кода, а от одной перепутанной строки. В этом уроке мы смотрим на чужую страницу и ищем, почему карточки не встали в ряд. Это тот же навык, который нужен на работе: не переписывать всё, а найти причину.

Как это работает: Смотрим на раскладку по порядку: родитель → display → промежуток → ширина. Сначала находим блок, внутри которого лежат карточки. Потом проверяем, что display: flex или grid задан именно ему, а не карточкам. Потом — есть ли gap. И только потом — ширина и переносы.

Разбор: Представьте страницу: три карточки .card лежат внутри .row, но стоят друг под другом. В CSS написано .card { display: flex; gap: 16px; }. Что не так? display: flex задан карточкам, а не их родителю .row. Поэтому в строку встали картинка, заголовок и подпись внутри каждой карточки, а сами карточки остались друг под другом. Лечится одной строкой: .row { display: flex; gap: 16px; }.

Уроки модуля 3

• 3.1 Карточка товара: картинка, заголовок и подпись (бесплатно)
• 3.2 Ряд и сетка: несколько карточек в строку (по подписке)
• 3.3 Телефон и компьютер: адаптивность (по подписке)
• 3.4 Сетка из карточек: grid и repeat (по подписке)
• 3.5 Ширина страницы и центрирование (по подписке)
• 3.6 Коробка и её размеры: box-sizing (по подписке)
• 3.7 Мини-проект: каталог из шести карточек (по подписке)
• 3.8 Разбор раскладки: что не так — вы здесь (по подписке)