SAPUI5中的网格自适应性

Question

我在大屏幕上使用3列的网格，2在介质上，1在小屏幕上。我希望网格使用列中的所有空格。网格包含6个带有多个按钮的VBox。可悲的是，它们并没有像我想的那样对齐。第二行列应该在第一行的列结束后立即开始。

现在，它看起来像这样：

我希望它看起来像这样

关于如何实现这一目标的任何想法？

Answer 1

您需要的是砌体布局。我使用砌体布局创建一个类似的自定义控件。我过去常常在网格容器中展示不同尺寸的产品。

附上以下屏幕截图链接：https://github.com/bhardwaj-rahul/sapui5-masonryLayout/blob/master/Example.gif

更新：

通过创建多列布局获得网格结构。

要创建多列布局，我们使用CSS属性：column-count。

.masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }

为了实现动态布局，即在大屏幕上显示更多列，在小屏幕上显示更少列，我们使用@media规则。

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 4;
    }
}

另外，我们没有为每个项目指定固定高度，它会一直插入一个项目。我添加了自定义CSS，使其看起来像一张卡片，您可以根据自己的要求进行编辑。

和项目的github链接：https://github.com/bhardwaj-rahul/sapui5-masonryLayout