画像の複雑な配置の方法。ボックスレイアウト？を使う感じになるのでしょうか・・・。

Question

前提・実現したいこと

はじめまして。
今、webの勉強をしています。

画像を配置するのに、方法を調べても難しくて
簡単にできる方法を探してます。
初心者でもわかりやすく解決できる方法があればよろしくお願い致します。

発生している問題・エラーメッセージ

まだ自分の方でも構築できていませんが
Aの画像に対して、

ABC
ADE

と、ふたつ並べた画像を上下に配置したいです。
まるっきりの初心者で、ボックスレイアウトの方法がいまいちわかっておりません。

申し訳ないですが、よろしくお願いします

該当のソースコード

ソースコード

試したこと

ネット上で調べてやって見たものの、
画像での答えがなく、CSSでのボックス？でのテンプレートしかなく
画像の当て方がわかりませんでした・・・。

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

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

Comments

[m.ts10806]

お絵かきレベルでも完成イメージ提示できませんか？
文字説明では限界があります

[m.ts10806]

あと、自身が思ったようにまず組んでみて、できてないならできてないものを提示してください。
「コードください」となるとそれは質問ではなく作業依頼ですので

Answer 1

こんな感じでしょうか？

サンプル

<div id="wrapper">
    <img class="a" src="http://placehold.jp/150x150.png?text=A" alt="">
    <img src="http://placehold.jp/150x150.png?text=B" alt="">
    <img src="http://placehold.jp/150x150.png?text=C" alt="">
    <img src="http://placehold.jp/150x150.png?text=D" alt="">
    <img src="http://placehold.jp/150x150.png?text=E" alt="">
</div>

#wrapper {
  display: grid;
  grid-template-columns: repeat(3, max-content);
}
.a{
  grid-row: span 2;
  width: 100%;
  height: 100%;
}

参考：
5分で完璧に分かる！CSS Gridの基本的な使い方を解説 | コリス

Comments

[ARLLEY19]

解決しました・・・。
本当にありがとうございます！！！

いいページ作りができそうです。
助かりました。
ベストアンサーに選ばせていただきます。