От автора: разберем некоторые вопросы, которыми сопровождается построение сетки CSS. Предположим, у вас очень простой макет с одним столбцом в 300 пикселей, а другой занимает остальное пространство в 1fr.
.grid { display: grid; grid-template-columns: 1fr 300px;
}В определенном смысле это здорово. Этот столбец в 1fr займет оставшееся место, оставленное фиксированным столбцом в 300px. Это правда, что значение auto делает то же самое, но auto не так надежен, поскольку его размер основан на внутреннем содержимом. Поэтому, если у вас слишком мало контента, то ваша колонка может не заполнить все пространство, которое вы хотите. Но в то время 1fr не поможет, если у вас слишком большое содержимое!
Вот сетка, которая подходит для текстового контента:
Теперь посмотрите, как правый столбец смещается, когда мы добавляем в этот столбец гигантское изображение:
Это легко исправить — и с вами даже может никогда такого случиться, потому что этот фрагмент очень распространен в таблицах стилей:
img { max-width: 100%;
}
Но некоторые элементы не так дружелюбны. Возьмем пресловутый тег pre. Скажем, мы добавляем в столбец 1fr длинную строку текста. Мы вернулись к смещению:
На этот раз все не так просто исправить! Даже попытка ограничить ширину и скрыть выходящий за границу контент pre не поможет:
pre { max-width: 100%; overflow: hidden;
}Реальное решение не так сложно — нам нужно только понять, что происходит. Я не могу пообещать, что объясняю это на 100% точно, но, как я понимаю, минимальная ширина столбца сетки — auto. (То же самое можно сказать и о гибких элементах.)
И поскольку auto полностью основан на контенте, мы можем сказать, что значение «неопределенно», если размеры гибкие. Если бы мы задали явно ширину столбца, например 50% или 400 пикселей, то мы бы сказали, что это «определено».
Чтобы исправить ситуацию, нам нужно обеспечить, чтобы столбец имел определенную минимальную ширину вместо auto. Итак, мы можем исправить это либо так:
.grid { /* минимальная ширина auto, вызывающая проблему */ grid-template-columns: 1fr 300px; /* решение: минимальная ширина - 0 */ grid-template-columns: minmax(0, 1fr) 300px;
}Или мы задаем фактическую минимальную ширину для элемента, который занимает этот столбец сетки. В нашей простой демо-версии элемент main автоматически помещается в этот первый столбец, так как он является первым дочерним элементом сетки.
Это дает нам следующее:
main { min-width: 0;
}Я думаю, что это лучше указывать это на уровне определения сетки. Во всяком случае, это работает! Посмотрите, как тег pre теперь соответствует ширине столбца и может обрезаться, как ожидалось?
Отлично.
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.