CSSのnth-of-typeが表示の切り替え時にも残ってしまっている

Question

いまやっていること

現在、カードが横並びに3つ並んでいるUIを作っています。仕様としては

• CMS（comfortable mexican sofa）からデータを表示している
• 初期状態ではカードは全て表示されている
• カードが並んでいるすぐ上にoptionタグがあり、それを選択したら、関連するカードだけが表示される
• カテゴリは「すべて」「メディア掲載」「プレスリリース」「イベント」

できたこと

• CMS（comfortable mexican sofa）からデータを表示
• 初期状態ではカードは全て表示
• カードが並んでいるすぐ上にoptionタグがあり、それを選択したら、関連するカードだけが表示

困っていること

A B C
D E

と横並びに3カラムで表示しているのですが、それをoptionタグを使って表示を切り替えた時に
CDEがすべて「イベント」の時に
C D E
のように並ばずに
CD E
のように余白の32pxがない状態で並んでしまいます。
問題を起こしているのは下記のコードにもある
nth-of-type(3n) {...} の部分であることは明白なのですが、どのようにその問題を回避したら良いかわかりません。。

Comments

[no1knows]

5個の場合ですが、下記のような形が希望ですか？
■　■　■
■　■

それともこのような形でしょうか？
■　■　■
■　　　■

それともこのような形でしょうか？
_■ ■ ■
__■_■

[MH00214]

わかりにくい質問ですみませんでした。
5個の場合は
■　■　■
■　■
この形になることを想定しています。

marginは
(0)■(32pxで固定)■(32pxで固定)■(0)
となればOKです。

Answer 1

回答をしてくださった方、ありがとうございます。
私の方ではjQueryを使って書く方法でなんとか実装できました。

const eliminateRightMargin = function () {
    const rowCount = 3;
    const activeClassCount = $(".active").length
    const lineCount = Math.floor(activeClassCount / rowCount);
    for (let i = 1; i <= lineCount; i++) {
      $(".active").eq(rowCount * i - 1).addClass("eliminate-right-margin")
    }
  }

  $(".news-category-select-box").change(function () {
    const $newsContentCard = $(".news-content-card");
    const $selectBoxValue = $(this).val();
    $newsContentCard.removeClass("active");
    $newsContentCard.removeClass("eliminate-right-margin");
    if ($selectBoxValue === "all") {
      $newsContentCard.addClass("active");
      eliminateRightMargin();
    }
    $(".news-content-" + $selectBoxValue).addClass("active");
    eliminateRightMargin();
  });

  $(window).on("load", function () {
    eliminateRightMargin();
  });

Answer 2

FlexBoxを使った場合のコード例

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="hidden">4</div>
  <div>5</div>
  <div>6</div>
</div>
<div class="next">
  next
</div>

.wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 364px;
  box-sizing: border-box;
  border: 1px solid blue;  
}

.hidden {
  display: none;  
}

.wrapper>div {
  width: 100px;
  box-sizing: border-box;
  border: 1px solid red;  
}

.wrapper::after {
  content: "";
  width: 100px;  
}

CodePenサンプル

FlexBoxで横並びにして、折り返しすると、下記のようになってします。
■　■　■
■　　　■

疑似要素て後ろに高さ0の要素を追加することで、
■　■　■
■　■
となります。

---

CSS Grid を使うともっとシンプルに記述できます。

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 0 32px;
  width: 364px;
  box-sizing: border-box;
  border: 1px solid blue;  
}

.hidden {
  display: none;  
}

.wrapper>div {
  width: 100px;
  box-sizing: border-box;
  border: 1px solid red;  
}

CodePenサンプル

Answer 3

ネガティブマージンを設定すると期待通りの動作をするはずです。
サンプルを用意しましたので、これを参考に設定してみてください。

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

div{
  box-sizing:border-box;
  width:396px;
  float:left;
  margin-right:-32px; # ←ネガティブマージン
  div{
    box-sizing:border-box;
    width:100px;
    margin-right:32px; # ←nth-childでmargin-right:0は設定しない
    border:1px solid #ff0000;
  }
}