初始化时 Masonry Grid Broken Layout

Question

我正在使用砖石网格进行图像布局，如下所示：

第 1 行 - 两张图片 50/50%

第二行 - 三张图片 33.33/33.33/33.33%

第 3 行 - 两张图片 50/50%

在通过 CSS 初始化和设置样式之前，布局效果很好。初始化后，无论是否加载图像，它都会破坏布局。

    .grid-sizer,
    .grid-item {
        width: 33.33%;
    }

如果我将上面的值更改为 25%，则三列图像很好地排列在一起，留下 space 作为第四张图像。 50% 宽度的图像相应地移动到顶部和底部。

如果我删除 50% 的两个项目并只保留 33.33% 的项目，它们似乎很好地排成一排。

难道就不能有这样的布局吗？我已经让许多其他人轻松工作。

Answer 1

我明白我的问题是什么了。在使用百分比时，我没有意识到每个网格项目必须被列宽整除。

变化中：

    .grid-sizer,
    .grid-item {
        width: 33.33%;
    }

到

.grid-sizer {
   width: 16.667%;
 }
.grid-item {
    width: 33.33%;
}

解决了我的问题。

Masonry Grid Broken Layout when Initializing