如何在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%;
}