.posts-list {
  display: flex;
  flex-flow: row wrap;

  article {
    flex: 1 0 auto;

    h5 {
      //font-size: 2.0rem;
    }

    h5, p {
      margin-bottom: 0.8rem;
    }

    .comment-count {
      font-style: italic;
    }

    .article-header {
      overflow: hidden;
    }

    @include breakpoint($tablet) {
      width: 40%;  // 2 columns (flex will expand as needed to fill the space)
      margin: 10px;
    }

    @include breakpoint($large-desktop) {
      width: 22%;  // 4 columns
    }
  }
}
.posts-list {
  display: flex;
  flex-flow: row wrap;

  article {
    flex: 0 0 auto;
    width: 100%;

    h5 {
      //font-size: 2.0rem;
    }

    h5, p {
      margin-bottom: 0.8rem;
    }

    .comment-count {
      font-style: italic;
    }

    .article-header {
      overflow: hidden;
    }

    @include breakpoint($tablet) {
      width: calc(50% - 20px);  // 2 columns, flex would be able to calculate that for us but it doesn't work
                                // when there is a varied number of items per line
      margin: 10px;
    }

    @include breakpoint($large-desktop) {
      width: calc(25% - 20px);  // 4 columns
    }
  }
}
Fix grid display when uneven number of items
Fix grid display when uneven number of items
