Колонки разъехались: сетка и телефон

Урок 11.4 · Интерфейсы и сайты с нуля · Модуль 11. Разбери экран: что не так и как починить · По подписке

Цель урока: Заметить, что раскладка держится только на большом экране, и перестроить её на телефоне.

Нужно знать заранее: Урок 11.1, урок 3.3

Объяснение

Зачем это нужно: На компьютере страница выглядит нормально, а с телефона — как три тонкие полоски: текст в них ломается по два слова, карточки не читаются. Это не «мелкий шрифт» и не «телефон плохой». Это раскладка, которая не умеет перестраиваться, — и увидеть её можно только на узком экране.

Как это работает: Ряд из трёх карточек задаётся родителю: display: flex (или display: grid) и gap. Пока экран широкий, три колонки — нормально. На узком экране та же строка сжимается, потому что карточки делят ширину, и каждая получается около 100 px. Медиазапрос говорит браузеру: «эти настройки применяй только на узком экране». Внутри него ряд перестраивается в столбик: flex-direction: column или grid-template-columns: 1fr. Всё остальное — отступы, цвета, размеры — остаётся прежним. Важно: на телефоне не уменьшают шрифт, чтобы всё влезло. Перестройка — это смена раскладки, а не уменьшение содержимого.

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

• 11.1 Пять вопросов к любому экрану (бесплатно)
• 11.2 Длинная строка: почему текст «расползается» (по подписке)
• 11.3 Слипшиеся блоки: отступ вместо рамки (по подписке)
• 11.4 Колонки разъехались: сетка и телефон — вы здесь (по подписке)
• 11.5 Не видно и не нажать: контраст и размер цели (по подписке)
• 11.6 Проект: разбор страницы целиком (по подписке)