Sunday Teaser - Changing col size depending on variable value

BIt of a half backed idea which i can do in other ways but I though of this and it was a challenge i couldn’t work out.

The idea is to present data in the form of a bar chart but thought of the concept of using variable length columns with green/ red backgrounds.

I wondered if anyone had any ideas on this other than using conditionals / show/hide options. I have other options (and probably much easier ones but …) This seemed a challenge and a useful idea

I could like to set column sizes dependent on a value

For example, the variable can have a value from 1 - 5

If value == 1 i want <div col-1 … then <div col-4 …

if value == 2 i want <div col-2… then <div col-3 …

etc
Thinking something conceptually like <div class="col-{{var1.value}} …col-{{5-var1.value}} (which does not work of course)

Anyone any ideas how to do this without conditionals, did consider using CSS calc() function but couldn’t work out how to do it that way with a variable

Community Page
Last updated: