如何以马赛克方式放置卡片？

Question

我有以下选择，允许用户选择颜色。

<select id="colorChoice" class="form-control text-center" ng-model="colorToSet" ng-change="setColor(colorToSet)">

  <option class="dropdown-item" ng-repeat="color in colors" value="{{color}}">{{color}}</option>

</select>

事实上，下拉菜单项是空白的，打开时会显示颜色选项。用户选择一种颜色，该颜色显示在下拉项上。

但是，当页面刷新时，该值不会保留显示在下拉项中。

我现在将该值保存到 sessionStorage 中，我想在刷新页面时显示它。

$scope.colors = ['red', 'green', 'orange', 'blue'];

$scope.setColor = function(colorToSet) {

  sessionStorage.setItem("color", colorToSet);

}

问题是 - 1到3 张卡片之间有空白区域。需要实现 - 没有这个额外的空白。卡3必须正好位于1之后

我已经尝试过grid-auto-rows: min-content--但没有结果。

不同高度的卡片需要一张一张地完全相同。没有额外的空白。（通过马赛克方式）。

Answer 1

您想要实现的目标称为Masonry Layout。您会在这里找到很多示例https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/&nbsp;我希望它能帮助您找到更适合您需求的选项。