last-page flag

resources.html

<!-- This won't work, the second grid will be picked up, leaving an unsightly empty column if there isn't enough content -->

    <div class="grid article cols-2 page-1">
      <div class="container col-1 cols-2" data-sizes="title"></div>
      <div class="container col-1 cols-2" data-sizes="author"></div>
      <div class="column"></div>
      <div class="container col-3 cols-1" data-sizes="thumbnail"></div>
      <div class="column col-3"></div>
    </div>

    <div class="grid article cols-2">
      <div class="column"></div>
      <div class="column col-3"></div>
    </div>

    <div class="grid article cols-2 last-page">
      <div class="column"></div>
      <div class="container col-3 cols-1" data-sizes="something"></div>
    </div>

workaround-resources.html

<!-- The workaround is to add an extra column. -->

    <div class="grid article cols-2 page-1">
      <div class="container col-1 cols-2" data-sizes="title"></div>
      <div class="container col-1 cols-2" data-sizes="author"></div>
      <div class="column"></div>
      <div class="container col-3 cols-1" data-sizes="thumbnail"></div>
      <div class="column col-3"></div>
    </div>

    <div class="grid article cols-2">
      <div class="column"></div>
      <div class="column col-3"></div>
    </div>

    <!-- But now this grid is candidate to be used on other pages too, so I need to hide it from all other pages--assuming I know how many pages an article will have. -->
    <div class="grid article cols-2 no-page-2 no-page-3 ...">
      <div class="column"></div>
      <div class="container col-3 cols-1" data-sizes="something"></div>
      <div class="column col-3"></div> <!-- extra column. maybe class="hidden" would be good too, for paranoia -->
    </div>