如何在CSS网格中将子宽度设置为父宽度的10％

Question

在CSS网格中创建10 x 10网格。

父元素（具有显示网格）没有宽度。会根据其父级宽度进行扩展或扩展100％。

需要为单个孩子设置10％的父级宽度。

我想为这100个子项平均设置高度和宽度，以便它可以扩展并在css网格中的子项内部显示svg。

Answer 1

通过使用以下代码，您可以将父元素分为10个大小相等的列。当父母的宽度改变时，每个孩子的宽度也会相对改变。

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

.child {
    width: 100%;
}