Jetpackの関連記事表示機能（プラグイン上での名前は関連投稿）が中々良かったので使うことに。

ただ、若干レスポンシブへの対応が完璧ではなかったのでフックによるPHPコード、CSSで調整してみました。

Jetpackの関連投稿をPHP&CSSで調整する

関連投稿の設定は以下の画像のように「視覚的インパクトがある大きめのレイアウトを使う」にチェックを入れた状態を前提としています。

PHPで最大表示件数を6件に変更

初期表示数は3記事ですが、レスポンシブデザインでは特定のブレイクポイントで扱いづらい数です。表示記事数を最大「6件」に設定します。functions.phpなどに以下を記述します。

function my_jetpack_relatedposts_filter_options( $options ) {
    $options['size'] = 6;
    return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'my_jetpack_relatedposts_filter_options' );

これで関連投稿記事が最大6件になります。

CSSでレスポンシブデザイン対応の調整

CSSでなるべくカラム落ちしないよう調整します。以下のコードをテーマのCSSに貼り付けます。flexboxを使用しているので、古いIEには対応していません。

（確認したブラウザはWindows, Mac各々のIE11, Edge, Chrome, Firefox, safariです。iPhoneやAndroidでも確認しました）

body #jp-relatedposts .jp-relatedposts-items {
  display: flex;
  flex-wrap: wrap;
  margin-right: -3.4005%;
}

body #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
  float: none;
  width: 46.5994%;
  margin-right: 3.4005%;
  margin-bottom: 24px;
  padding-right: 0;
}

body #jp-relatedposts .jp-relatedposts-post-thumbs > .jp-relatedposts-post-a {
  display: block;
  margin-bottom: 8px;
}

// Base font size = 16px -> min-width: 48em = min-width: 768px
@media only screen and (min-width: 48em) {
  body #jp-relatedposts .jp-relatedposts-items {
    margin-right: -2.1072%;
  }

  body #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
    width: 31.226%;
    margin-right: 2.1072%;
  }
}

これでウィンドウサイズが768px以上なら3列表示、未満（タブレットやスマホ）なら2列表示で関連投稿を表示します。

簡易的な対応ですので、ご参考程度に。

参考：Customize Related Posts — Jetpack for WordPress