MODX REVO. How to display posts via getResources 3 in each row?

Question

MODX

The template uses Bootsrap grid layout. You need to display 9 posts, 3 in each row, while the markup is as follows:

<div class="row">
  <div class="col-md-4"> ... </div>
  <div class="col-md-4"> ... </div>
  <div class="col-md-4"> ... </div>
</div>
<div class="row">
  <div class="col-md-4"> ... </div>
  <div class="col-md-4"> ... </div>
  <div class="col-md-4"> ... </div>
</div>

The tpl template for getResources will be in . The question is how to set up the output so that the posts are displayed 3 in each row. I think this is done through modifiers like this:<div class="col-md-4"> ... </div>

</div> <!-- /row --><div class="row">

That is, if the serial number of the post is 3, then we close the row and start a new one . Or is there a better way? </div> <div class="row">

Answer 1

I found the following solution for myself:
Create templates firstPost, lastPost, post3th, post.
first Post:

<div class="row">    
    <div class="col-md-4">
    ...
    </div> <!-- /.col-md-4 -->

last post:

<div class="col-md-4">
      ...
    </div> <!-- /.col-md-4 -->
</div> <!-- /row -->

post3th:

<div class="col-md-4">
   ...
    </div> <!-- /.col-md-4 -->
</div> <!-- /.row -->
<div class="row">

post:

<div class="col-md-4">
...
</div> <!-- /. col-md-4 -->

firstPost opens a row and there is a check in it, if this is the last post on the page, then it closes the row.
post3th closes the row after every 3rd post and opens a new one.
lastPost closes the row.

Answer 2

This is done by layout.

<div class="row">
  <div class="col-md-4"> ... </div>
  <div class="col-md-4"> ... </div>
  <div class="col-md-4"> ... </div>
  <div class="col-md-4"> ... </div>
  <div class="col-md-4"> ... </div>
  <div class="col-md-4"> ... </div>
</div>