I have a collection list that displays 10 cards (created as grids). On the cards I have a grid element that I use as an infographic (think horizontal bar chart). I want to adjust the graphic for each card using the % width of each column. I can’t figure out how to use the initial grid (and related styling) as a template to customize for each card. When I duplicate and rename the original grid, it just adds it to every card.
did you try to use a filter? I do not know If it will work, but you can give it a chance.
Here is another option by using JS
document.addEventListener("DOMContentLoaded", () => {
const fullWidth = document.querySelector(".chart-container").offsetWidth
const percents = document.querySelectorAll(".percent")
for(const percentElement of percents){
const value = percentElement.innerText;
const num = setWidth(fullWidth,value)
percentElement.style.width = `${num}px`
}
function setWidth(fullWidth,value){
const size = (fullWidth / 100) * value;
return size
}
});
See in Webflow
Live
here you can see how I have set it up and check companies collection to see numbers. With this code will be everything automatically changing based on given numbers from the collection (no need to set columns). I know that is an only basic script but it can give you an idea of how it can be solved. Sorry about variables names 
Stan you’re a rockstar. I copied what you shared and it worked. i’ve been fiddling with this and mad e a ton of progress. Wha I am trying to do now is fill in the grid based on the score. So rather that stacking everything to the left I want to fill out each grid item. Any tips? I dont know JS and suspect it is a change there.
Hi @surfingrik glad that it works for you. By filling the full space you mean this?
Hi @surfingrik this is exactly identical case as before but you will need set a bit complex structure. This means that your score (with background) should be a div inside each current section lets call it a Wrapper. Each width will be calculated based on width of this Wrapper (100%) as in the example. You only need to grab this Wrapper width (fullWidth) and apply this function on each of five sections you have.
So your structure can be CONTAINER → 5x WRAPPER → (in each wrapper) SCORE (div) → score number. Or something like that.
EDIT: here is IDENTICAL case I have just grabbed .holder
You should freelance 
Hi @surfingrik feel free to mark any comment as SOLUTION to be this question marked as solved
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.
