Установите минимальную и максимальную ширину столбца сетки, используя проценты
Когда я устанавливаю для первого столбца в столбце сетки CSS минимальный процент, ширина столбца не соответствует минимуму. Пример:
grid-template-columns: minmax(50%, 75%) 1fr;
При этих значениях по мере сужения окна просмотра первый столбец продолжает уменьшаться по горизонтали, пока, наконец, не схлопнется и не исчезнет. Точно так же растяжение экрана делает первый столбец шире по мере продвижения, так что в конечном итоге он становится шире, чем 3/4 от общей ширины сетки.
(Тем не менее, при большей ширине сетки пропорции двух столбцов примерно соответствуют тому, чего я пытаюсь достичь.)
Итак, есть ли способ сделать первый столбец, ширина которого всегда, скажем, не меньше половины ширины сетки и никогда не превышает 2/3?
Примечания:
- Grid-gap на данный момент равен 0, чтобы не усложнять процентные расчеты.
- Я знаю, что могу установить минимальную ширину на фиксированное число пикселей и, таким образом, установить минимальную ширину — столбец не исчезнет. Но затем, когда сетка сужается, нарушается максимальное процентное ограничение. Кроме того, я стараюсь не использовать фиксированную ширину пикселей.
Мой код (разрыв сетки добавлен для отображения границ столбцов):
.wrapper {
display: grid;
grid-template-columns: minmax(50%, 75%) 1fr;
grid-gap: 1px;
padding: 10px;
background-color: #219643;
}
.item {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}<div class = "wrapper">
<div class = "item">Column 1</div>
<div class = "item">Column 2</div>
</div>@David и т. д.: да, установка явной ширины контейнера (здесь «обертка») на 100% или 90% - это проценты от области просмотра - не имеет никакого эффекта, как я вижу. Насколько я понимаю, ширина, из которой рассчитывается процент, равна ширине родителя, поэтому minmax (50%, 75%) должен относиться к ширине div «обертки». Если для ширины оболочки задано фиксированное число пикселей, размер столбцов вообще не изменяется при изменении ширины окна просмотра.
Это работает лучше для вас? jsfiddle.net/dLke91zv
@MichaelBenjamin: Да, да! Пожалуйста, объясните, почему ваша версия работает, а моя нет, если у вас есть время.
Ответы 1
Ваш исходный код выглядит нормально. Я считаю, что это должно работать. Почему это не так, мне не совсем понятно.
Скажу так: мы как раз на Grid Level 1. Это совершенно новая технология, поэтому следует ожидать некоторых сбоев и ограничений.
Например, в вашем minmax(50%, 75%) трек по умолчанию всегда будет иметь значение max.
Это удаляет minmax() как полезную опцию во многих макетах, так как многие люди хотят min по умолчанию.
Почему не работает минимальный процент? Я думаю, что это как-то связано с шириной родительского контейнера (никакие настройки, которые я пробовал, не работали), или что-то с сеткой алгоритмом определения размера дорожки. Опять непонятно.
Так что я просто пропустил все это, дав браузеру те же самые команды другим способом. Кажется, это работает:
.wrapper {
display: grid;
grid-template-columns: minmax(50%, 1fr) 25%;
grid-gap: 1px;
padding: 10px;
background-color: #219643;
}
.item {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}<div class = "wrapper">
<div class = "item">Column 1</div>
<div class = "item">Column 2</div>
</div>Ваш связанный пост очень полезен. Но будут ли результаты grid-template-columns: 75% 25% отличаться от того, что мы получаем с вашим кодом?
Также к вашему замечанию о проблеме первого прохода «Уровня 1» в спецификации сетки относится что-то вроде: grid-template-columns: minmax(50%, 1fr) 140px; минимальная настройка для первого столбца игнорируется - количество пикселей для второго столбца всегда поддерживается на уровне за счет того что "50%" минимум.
Что касается вашего первого комментария, я бы сказал «да». Пока браузер не соблюдает min 50%, gtc 75% 25% кажется эквивалентным.
По поводу вашего второго комментария согласен. Это проблема.
Разрабатывая мой второй комментарий: моя точка зрения заключалась в том, что, как и в случае предпочтения по умолчанию уровня 1 для максимальной настройки, которую вы определяете, реализация сетки на уровне 1 не дает вам выбора в отношении того, какие настройки столбца имеют приоритет: если вы установите фиксированная ширина в пикселях для одного столбца, «минимум» 50% для второго столбца игнорируется в пользу сохранения указанного количества пикселей.
У вас есть процентная ширина и единицы fr; кажется, что нет начальной известной ширины, из которой можно рассчитать процент. Вы пытались назначить ширину элементу сетки?