CSS динамический класс

Question

Допустим, у меня есть гибкий оберточной контейнер с атрибутом данных-столбцов, как это:

<div class="grid" data-columns="2"></div> 

и

.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%; 
} 

идея заключается в том, что дети .grid элементов класса имеют ширина 1/grid.data-columns. Теперь я мог бы, конечно, написать кучу из них, но мне интересно, есть ли более динамичный способ сделать это? Может ли css на самом деле выбрать количество столбцов из своего родительского элемента и использовать его в вычислении для определения ширины?

Answer 1

Не понимайте при этом все с помощью «Может ли css реально выбрать количество столбцов из их родительского элемента и использовать его в расчете для определения ширины?», Но если вы получили, как сказать Ребенок с класс «grids_child» в «сетке» вы можете сделать

.grid_child{width:calc(100%/2);} 

и что будет делать все элементы с классом «.grid_child», чтобы иметь 50%

я не понял ваш вопрос, но я сказал вам, что я вижу «1/.grid».

Хороший выбор его USEA предварительного proccessor, как кто-то сказал вам

Answer 2

Как сказал Марк в комментарии,

CSS3 имел функцию атр(), которые могли бы работать, но он может получить только значения атрибута выбранного элемента, а не родительский элемент.

а также нет браузера, поддерживающего CSS3's attr(). Так что это должно быть сделано с помощью внешних инструментов, таких как LESS и SASS.

Вот пример написан в 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 

и это будет переведен на

.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%; 
}