CSS dynamic class - css

Question

Lets say I have a flex wrapping container with an attribute data-columns like this:
<div class="grid" data-columns="2"></div>
and
.grid {
display:flex;
flex-wrap:wrap;
}
.grid[data-columns=2] > * {
width:50%;
}
.grid[data-columns=3] > * {
width:33.3%;
}
.grid[data-columns=4] > * {
width:25%;
}
the idea is that the children of .grid class elements have the width of 1 / grid.data-columns. Now i could of course just write a bunch of them but I'm wondering if there is a more dynamic way to do this? Could css actually fetch the number of columns from their parent element and use it in a calculation to determine width?

Answer 1

Don't understanding at it all with "Could css actually fetch the number of columns from their parent element and use it in a calculation to determine width?", but if you got, how to say 2 childs with the class "grids_child" in "grid" you can do
.grid_child{width:calc(100% / 2);}
and that will make all the elements with the ".grid_child" class, to have 50%
I didn't understand your question, but I told you this cause I see the "1 / .grid".
A good choice it to usea the pre-proccessor like someone told you

Answer 2

As Marc said in the comment,
CSS3 had the attr() function that might work but it can only get the attribute values of the selected element, not a parent element.
and also there's no browser supporting CSS3's attr() currently. So it have to be done with external tools such as LESS and SASS.
Here's an example written in LESS:
#max: 10;
.col(#index) when (#index =< #max) { // iterate
.grid[data-columns=#{index}] > * {
width: percentage(1 / #index);
}
.col((#index + 1));
}
.col(#index) when (#index > #max) {} // terminal
.col(1); // kickstart it
and this will be translated to
.grid[data-columns=1] > * {
width: 100%;
}
.grid[data-columns=2] > * {
width: 50%;
}
.grid[data-columns=3] > * {
width: 33.33333333%;
}
/* ...... */
.grid[data-columns=10] > * {
width: 10%;
}