Я ищу сетки для конкретного компонента React, который я создаю, который является контейнером для четырех индикаторов прогресса. Суть в том, что четыре столбца различаются по размеру относительно процесса, за который они отвечают, но четыре столбца вместе должны также различаться по размеру относительно друг друга; если процесс A занимает вдвое больше времени, чем процесс B, то он должен быть в два раза шире. Кроме того, процессы не запускаются одновременно, это означает, что процесс A запустится и займет 100% ширины, затем начнется процесс B, и ширина должна быть разделена, тогда C et c:
Контейнер индикатора выполнения
Статически вы можете легко добиться этого с помощью сеток:
display: grid;
grid-template-columns: 20% 25% 15% 40%;
.. но проценты необходимо динамически обновлять, а также я нужно добавить новый столбец, когда начинается новый процесс. Я опрашиваю данные о процессах и получаю обновления о процессах каждую х секунду. Динамическое изменение имен классов не помогает, и я не знаю много о динамическом изменении атрибутов css таким образом, чтобы решить эту проблему.