初始化时砌体网格损坏的布局答案

【问题标题】：Masonry Grid Broken Layout when Initializing初始化时砌体网格损坏的布局
【发布时间】：2016-04-04 20:40:41
【问题描述】：

我正在使用砖石网格来进行如下的图像布局：

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

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

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

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

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

如果我将以上更改为 25%，则三列图像会很好地排列，为第四张图像留出空间。 50% 宽度的图像会相应地移动到顶部和底部。

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

是不是不可能有这种布局？我让许多其他人轻松工作。

【问题讨论】：

【解决方案1】：

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

变化：

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

到

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

解决了我的问题。

【讨论】：