Предотвращение смещения при построении сетки CSS

Предотвращение смещения при построении сетки CSS

От автора: разберем некоторые вопросы, которыми сопровождается построение сетки CSS. Предположим, у вас очень простой макет с одним столбцом в 300 пикселей, а другой занимает остальное пространство в 1fr.

В определенном смысле это здорово. Этот столбец в 1fr займет оставшееся место, оставленное фиксированным столбцом в 300px. Это правда, что значение auto делает то же самое, но auto не так надежен, поскольку его размер основан на внутреннем содержимом. Поэтому, если у вас слишком мало контента, то ваша колонка может не заполнить все пространство, которое вы хотите. Но в то время 1fr не поможет, если у вас слишком большое содержимое!

Вот сетка, которая подходит для текстового контента:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Теперь посмотрите, как правый столбец смещается, когда мы добавляем в этот столбец гигантское изображение:

Это легко исправить — и с вами даже может никогда такого случиться, потому что этот фрагмент очень распространен в таблицах стилей:

Но некоторые элементы не так дружелюбны. Возьмем пресловутый тег pre. Скажем, мы добавляем в столбец 1fr длинную строку текста. Мы вернулись к смещению:

На этот раз все не так просто исправить! Даже попытка ограничить ширину и скрыть выходящий за границу контент pre не поможет:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Реальное решение не так сложно — нам нужно только понять, что происходит. Я не могу пообещать, что объясняю это на 100% точно, но, как я понимаю, минимальная ширина столбца сетки — auto. (То же самое можно сказать и о гибких элементах.)

И поскольку auto полностью основан на контенте, мы можем сказать, что значение «неопределенно», если размеры гибкие. Если бы мы задали явно ширину столбца, например 50% или 400 пикселей, то мы бы сказали, что это «определено».

Чтобы исправить ситуацию, нам нужно обеспечить, чтобы столбец имел определенную минимальную ширину вместо auto. Итак, мы можем исправить это либо так:

Или мы задаем фактическую минимальную ширину для элемента, который занимает этот столбец сетки. В нашей простой демо-версии элемент main автоматически помещается в этот первый столбец, так как он является первым дочерним элементом сетки.

Это дает нам следующее:

Я думаю, что это лучше указывать это на уровне определения сетки. Во всяком случае, это работает! Посмотрите, как тег pre теперь соответствует ширине столбца и может обрезаться, как ожидалось?

Отлично.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree