『抜粋』を使ってサムネイルを横に３つ等間隔で表示したい。

Question

『抜粋』を使ってサムネイルを横に３つ等間隔で表示したい。

完全初心者です。
有料のテンプレートを使ってワードプレスをカスタマイズしています。

トップページに投稿記事のサムネイルを横に３つ表示し、サムネイルの下に投稿記事本文の抜粋ではなく、投稿編集ページの「抜粋を入力（任意）」から記事の説明を加えたいと思っています。

投稿記事本文の抜粋を表示している時は、サムネイルを横に３つ表示できます。

ですが、「抜粋を入力（任意）」から抜粋を入力すると、サムネイルの表示は横に２つ、その列の左下に１つという表示になってしまいます。

これを横に３つ表示したいのですが、どのようにすればよいでしょうか？

＜試したこと・解決したいこと＞
画像の横幅を縮小（width: 30.444444444%→29%）して、横に３つ表示することはできました。
ただそうすると向かって右側に余白ができてしまいます。この余白が左側の余白と同じ幅で、サムネイルを等間隔に、またデフォルトの大きさ（30.444444444%）で表示したいと思っています。

解決するためにどんな情報が必要か？それすらもわかりませんので、必要な情報があればおっしゃって頂ければと思います。

よろしくお願い致します。

Answer 1

calcをご利用ください。
ただしこの際、コード中に空白文字があると改行してしまうため改行は全て削除してください。

MDN

Comments

[退会済みユーザー]

ありがとうございます！試してみてます。また質問させていただくかもしれませんが、よろしくお願い致します。

[kyoya0819]

https://codepen.io/asuchi0819/pen/poobypB
上がサンプルになります。

[退会済みユーザー]

ありがとうございます！