CSS Grid — 如果包裹，则平均划分行

Question

我正在学习 CSS 网格。

我有以下设置:

grid-template-columns: repeat(auto-fit, minmax(45px, 1fr));

因此，如果子项小于 45px，则换行。

我想知道是否有可能在有任何包装的情况下将 child 平均分配到形成的“行”中。

例如，给定 12 个 child ，可以是 1 排 12 个、2 排 6 个、3 排 4 个等。

Answer 1

试试这个:

.parent-class { 
    display:grid; 
    grid-template-columns:repeat(4, 1fr); /* repeat 4 columns per row */
    grid-template-columns:repeat(6, 1fr); /* repeat 6 columns per row */
    column-gap:15px;
}