CSS-сетка расширяет/сжимает столбец в зависимости от содержимого, сохраняя при этом другие столбцы одинаковыми ⇐ CSS

[Anonymous]

У меня есть сетка элементов, размер которых мне нужно динамически изменять. Каждый столбец должен заполнять как можно большую страницу в развернутом виде, а дочерние элементы будут соответствовать этому размеру. Итак, у меня есть 5 столбцов, максимальная ширина каждого из которых должна составлять 20%. При возникновении события содержимое любого из 5 столбцов уменьшится до 40 пикселей. Я бы хотел, чтобы столбец сетки распознавал, что содержимое уменьшилось, и чтобы размер столбца изменялся в соответствии с новой заданной шириной (40 пикселей). Остальные 4 столбца должны по-прежнему иметь ширину 20 %. Произойдет еще одно событие, которое удалит ширину в 40 пикселей и снова позволит увеличить максимальный размер столбца до 20 %.

Итак, вот визуальное представление всех столбцов на уровне 20 %:



А затем, когда событие произойдет, мне нужно, чтобы какой-либо столбец сжался, чтобы соответствовать его содержимому (в этом сценарии 40 пикселей), и чтобы столбец сетки сжался вместе с ним, сохраняя при этом остальные 4 столбца на уровне 20%.
р>




Я создал быструю демо-версию, но, поскольку я новичок в сетках, мне не удалось найти правильную комбинацию min, max, minmax, автозаполнения, автоподбора и fr!
>
for (const столбец document.querySelectorAll('.main div')) { column.addEventListener("mouseover", (event) => { column.classList.toggle('shrink'); }); .main { дисплей: сетка; столбцы-шаблона сетки: повтор (5, 20%); } .main div:nth-child(1) { фон: красный; } .main div:nth-child(2) { фон: синий; } .main div:nth-child(3) { фон: желтый; } .main div:nth-child(4) { фон: зеленый; } .main div:nth-child(5) { фон: фиолетовый; } .сокращать { ширина: 40 пикселей; Пункт 1 Пункт 2 Пункт 3 Пункт 4 Пункт 5

Спасибо