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

Question

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

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

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

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

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

http://codepen.io/byoungz/pen/JXOKqW

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

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

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

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

Answer 1

我弄清楚了我的问题是什么。在使用百分比时，我没有意识到每个网格项必须按列宽划分。

更改：

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

至

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

解决了我的问题。