• Теория
  • Теория

Изменяем ширину колонок

Мы добавили на страницу вторую карточку. Блок с ценой в ней оказался шире третьей колонки, и в результате содержимое выпало из контейнера. Чтобы более высокая цена не вываливалась, нужно увеличить ширину колонки.

Для этого придётся изменить шаблон карточки: увеличить ширину третьей колонки и уменьшить ширину второй. Но какие размеры им задать? Попробуем сделать колонки одинаковыми по ширине. В этом случае места хватит и для заголовка, и для достаточно большой цены. Вот так карточка будет выглядеть, если увеличить цену до миллиона рублей:

Макет карточки

Разумеется, если цена дойдёт до 10 миллионов, ширину колонок снова придётся менять. Но для мобильного тарифа это маловероятно.

Работая с макетом, нужно помнить, что даже самый дотошный дизайнер не изобразит на нём все возможные состояния компонента. Верстальщик, приступая к работе, должен проанализировать макет, подумать, как будет меняться содержимое компонета, и учесть это в своей вёрстке.

Итак, изменим ширину колонок и посмотрим, как поведут себя блоки с ценой.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Микросетки. Продолжение» тренажёра «Базовые механики построения сеток» можно после регистрации и оформления подписки.