Masonry Grid View

@model Sitecore.XA.Foundation.RenderingVariants.Models.VariantListsRenderingModel
@using Sitecore.Data.Items
@using Sitecore.XA.Foundation.MarkupDecorator.Extensions
@using Sitecore.XA.Foundation.RenderingVariants.Extensions
@using Sitecore.XA.Foundation.RenderingVariants.Fields
@using Sitecore.XA.Foundation.SitecoreExtensions.Extensions
@using Sitecore.XA.Foundation.Variants.Abstractions.Fields
@{
    int index = 0;
}
<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "masonry-grid", Model.Attributes)>
    <div class="component-content">
        @Html.Sxa().RenderHeading(Model.HeadingTag, Model.DataSourceItem, "Title", Model.GetRenderingWebEditingParams())

        @if (Model.Rendering.DataSourceItem == null)
        {
        @Model.MessageIsEmpty
        }
        @if (!Model.Items.Any() && Model.Rendering.DataSourceItem != null)
        {
            using (Html.Sxa().BeginEditFrame(Html.Sitecore().CurrentRendering.DataSource, "Link Empty", Model.IsControlEditable))
            {
        @Model.MessageIsEmpty
            }
        }
        @{
            String itemSelector = @Model.DataSourceItem.Fields["itemSelector"].Value;
            String columnWidth = @Model.DataSourceItem.Fields["columnWidth"].Value;

        }

        <div class="grid" data-masonry='{ "itemSelector": "@itemSelector", "columnWidth":@columnWidth, "percentPosition": true}'>
            <div class="grid-sizer"></div>
            @foreach (Item item in @Model.Items)
            {
            <div class="grid-item @ListsHelper.BuildCssClass(index, Model.Items.Count())">
                @using (Html.Sxa().BeginEditFrame(item.ID.ToString(), "Link", Model.IsControlEditable))
                {
                    foreach (BaseVariantField variantField in Model.VariantFields)
                    {
                @Html.RenderingVariants().RenderVariant(variantField, item, Model.RenderingWebEditingParams, Model)
                    }
                }
            </div>
                index++;
            }
        </div>
    </div>
</div>