Developer forum

Hi Martin

Take caution, these kind of layouts, some call them masonry, is quite hard to get to work properly. Especially while trying to be responsive.

It sets high requirements for the content in each paragraph. For example, to look great, all four paragraphs on the left side must have exactly the half of the height of the paragraph on the right side. Minus the spacing between the paragraphs. And especially while still remaining responsive.

I would like to propose a custom solution that may work for you. What you could do, is make a special paragraph container for this special layout. 

I will try to describe the basic concepts for you to work on. I have not tested them, so there may be more to do. But if you can grasp the concept, I think it should be possible. And you may also be able to create an even better solution:
 

- In the DW backend go to "item types" -> "paragraph container" create a copy of the Item, and give it a suitable name.
- In the Files/Templates/Designs/Rapido/Pargraph folder copy the ParagraphContainer.cshtml file, and give it the exact same name as the new item type

Then open the new template and let’s customize:

My idea is that you, in the Model.Item.GetItems("Paragraph") loop, should try to catch the first four elements and place them in their own grid and then place the next elements in another grid:

In the top of the template, declare a new variable:

string paragraphCount = 0;

Wrap the loop in to a column element like this:


     <div class="@gridClasses">
          <div class="grid__col-6">
          @foreach (var paragraph in Model.Item.GetItems("Paragraph"))
 

Then locate the block that looks like this:

<div class="@columnCssClasses paragraph-container" style="@backgroundImage">

      @RenderContent(paragraph, Model.Item.GetBoolean("EnableCarousel"))

</div>

And rewrite it to be something like this:
 

<div class=”grid grid__bleed-x grid__bleed-y”
     <div class="@columnCssClasses paragraph-container" style="@backgroundImage">

           @RenderContent(paragraph)

     </div>
</div>

if (paragraphCount == 3) {

     paragraphCount = 0;
     string gridSplitter = “</div><div class=\”grid__col-6\”>”;
     @gridSplitter;

}
paragraphCount++;