как установить дочернюю ширину 10% родительской ширины в сетке CSS

Question

Создание сетки 10 x 10 в сетке CSS.

родительский элемент (который имеет сетку отображения) не имеет ширины. в зависимости от ширины родительского элемента он будет расширен или увеличен на 100%.

Необходимо установить 10% ширины родителя для одного ребенка.

Я хочу установить высоту и ширину для всех этих 100 дочерних элементов равномерно, чтобы они могли расширяться и отображать svg внутри дочернего элемента в сетке css.

Answer 1

Вы можете разделить ваш родительский элемент на 10 столбцов одинакового размера, используя следующий код. Когда ширина родительского элемента изменится, ширина каждого дочернего элемента также относительно изменится.

.parent {
    display: grid;
    grid-template-columns: repeat(10, 1fr); //Break this div into 10 columns of equal size
}

.child {
    width: 100%;
}