【css】3個のアイテムと5個のアイテムを2x4のタイル表示にしたい。

Question

前提・実現したいこと

グリッド表示（タイル表示）について。
ご覧いただきありがとうございます。

グリッドを利用して<div class="item">を2 x 4のタイル表示がしたいです。
しかしながら、<div class="categoris">のタグは絶対に外すことができないため、
2 x 2と2 x 3の二つに分かれてしまう状態です。
それぞれが奇数個であるため、空いたスペースなくした表示をしたいです。
今後<div class="item">のタグが増えることも想定に入れたレスポンシブな方法はありますでしょうか。
お力添えいただければ幸いです。
よろしくお願いします。

理想の状態↓

A	A
A	B
B	B
B	B

現在の状態↓

A	A
A
B	B
B	B
B

該当のソースコード

<div class="box">
  <div class="categoris">
    <div class="item">A</div>
    <div class="item">A</div>
    <div class="item">A</div>
  </div>
  <div class="categoris">
    <div class="item">B</div>
    <div class="item">B</div>
    <div class="item">B</div>
    <div class="item">B</div>
    <div class="item">B</div>    
  </div>
</div>

.categoris{
    grid-template-columns: 1fr 1fr;
}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

一応求めている形に再現できたのでご確認ください。
https://codepen.io/takamiii-158cm/pen/WVMEEE

<div class="box">
  <div class="categoris">
    <div class="item itembox01">A1</div>
    <div class="item itembox02">A2</div>
    <div class="item itembox03">A3</div>
  </div>
  <div class="categoris">
    <div class="item itembox04">B1</div>
    <div class="item itembox05">B2</div>
    <div class="item itembox06">B3</div>
    <div class="item itembox07">B4</div>
    <div class="item itembox08">B5</div>
  </div>
</div>

.categoris {
  display: grid;
  grid-template-columns: 1fr 1fr; }

.item {
  text-align: center;
  width: 100px;
  height: 100px;
  background-color: #efefef; }

.itembox01 {
  grid-column: 1 / 2;
  grid-row: 1 / 2; }

.itembox02 {
  grid-column: 2 / 3;
  grid-row: 1 / 2; }

.itembox03 {
  grid-column: 1 / 2;
  grid-row: 2 / 3; }

.itembox04 {
  margin-top: -100px;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  background-color: red !important; }

.itembox05 {
  grid-column: 1 / 2;
  grid-row: 2 / 3; }

.itembox06 {
  grid-column: 2 / 3;
  grid-row: 2 / 3; }

.itembox07 {
  grid-column: 1 / 2;
  grid-row: 3 / 4; }

.itembox08 {
  grid-column: 2 / 3;
  grid-row: 3 / 4; }

Comments

[unm]

ありがとうございます。
他のコードに影響が出てしまうため、模索しておりました。
大変助かりました。

Answer 2

これだとダメな理由を知りたいです。
A.Bごとにcategorisでくくらないといけないのでしょうか。

<div class="box">
  <div class="categoris">
    <div class="item">A</div>
    <div class="item">A</div>
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">B</div>
    <div class="item">B</div>
    <div class="item">B</div>
    <div class="item">B</div>    
  </div>
</div>