Create views with UI Pattern Views I have views like this: 



I want use module UI Pattern Views. I defined UI Pattern. File card.ui_patterns.yml with content

card:
  label: Three column fluid
  description: Three column fluid
  fields:
    image:
      type: render
      label: Image
      description: Media image.
      preview:
        theme: image
        uri: http://lorempixel.com/900/500/sports/1
        width: 150
        attributes: {}
    title:
      type: link
      label: Title
      description: Media title.
      preview:
        type: processed_text
        text: &lt;a href="#"&gt;Etiam iaculis nunc ac metus&lt;/a&gt;
        format: basic_html


and file pattern-card.html.twig have content: 

&lt;div class="card"&gt;
    {% if image is not empty %}
        &lt;div class="card-image"&gt;
            {{ image }}
        &lt;/div&gt;
    {% endif %}
    &lt;div class="card-body"&gt;
        &lt;h4 class="card-title"&gt;{{ title }}&lt;/h4&gt;
    &lt;/div&gt;
&lt;/div&gt;


I don't know how can use multil image style for this case. Any suggetion?
Here's a step-by-step:


Install the UI Patterns Views module
Insert the fields and map them to the UI Pattern fields


Note: You are mapping fields for the rows.



At this point, each piece of content should be rendered as a UI Pattern

Now, if you want to arrange the cards in a specific way (say, using Masonry), then you can do it in one of the following ways:


Add a class to the entire view, say, js-view-masonry – you can then use this class in JavaScript to detect this view and apply the JS plugin that organizes the cards like you want.
The other way will be to create a superpattern of the card pattern. Say, a card_collection pattern, with a field named items. Next, override the view's template, especially the part where the rows are rendered. Here, instead of displaying the rows, into the "card_collection" pattern.


Here's a working example of the second method using "card_collection". The blog list consists of 2 patterns. The "card" pattern and a pattern called "card collection" which wraps the cards.