Flexboxでtableのrowspanやcolspanのように結合したい

なぜ動いているかはちゃんと理解していませんので、解説はしません。ソースコードのみ残します。

ゴール

HTMLのtableタグのrowspanやcolspanのように、縦列結合、横列結合をする。画像のように緑はrowspan=3、オリーブ色はcolspan2で結合しています。

ソースコード

HTML

<div class="container">
    <div class="box" style="background: green;"></div>
    <div class="box" style="background: blue;"></div>
    <div class="box" style="background: red;"></div>
    <div class="box" style="background: black;"></div>
    <div class="box" style="background: olive;"></div>
</div>

CSS

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: 50% 50%;
  height: 200px;
}

.box:first-child {
  grid-column: 1;
  grid-row: 1/ 4;
}

.box:last-child {
  grid-column: 1/3;
  grid-row: 4;
}

.box {
  grid-column: 2;
}

ソース

• CodePen

終わりに

どの属性を修正することで、どのように影響するのかを理解していないので、全体も全然理解できません…。

なんとなく、grid-rowとgrid-columnが大事だろう、ということはわかってはいますが、それ以上の理解は難しいですね…。

---

この記事お役に立ちましたら、各種SNSでのシェアや、今後も情報発信しますのでフォローよろしくお願いします。

• 技術ブログはこちら
• 雑記ブログはこちら

参考

• https://stackoverflow.com/questions/22895011/rowspan-behavior-with-flexbox
• https://teratail.com/questions/260043