【flex？grid？】レスポンシブでのレイアウト変更

Question

実現したいこと

画像のようなレイアウトを実現したいです。
FlexboxかGridを使用するのかな、と思っているのですが実現できるより良い方法があれば教えていただきたいです。

発生している問題・分からないこと

gridとflexbox、両方で組んでみたのですが、どうしてもスマホ時に「C」を100％でカラム落ちできません。

該当のソースコード

.column_wrap{
	display: block grid;
	grid-template-columns: 150px 1fr;
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 25px;
	grid-row-gap: 0px;
	
	@include tb{
		grid-template-columns: 100px 1fr;
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 15px;
	}
	
	.A { 
		grid-area: 1 / 1 / 2 / 2;
		
		@include tb{
			grid-area: 1 / 2 / 3 / 2;
		}
	}
	
	.B { 
		grid-area: 1 / 2 / 2 / 3;
		
		@include tb{
			grid-area: 1 / 2 / 2 / 3;
		}
	}
	
	.C { 
		grid-area: 2 / 2 / 3 / 3;
		margin-top: 15px;
		
		@include tb{
			width: 100%;
			grid-area: 2 / 2 / 3 / 3;
		}
	}
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

このレイアウトパターンの事例をなかなかうまく検索出来ず、ソースコードを調べられずにいます。

補足

特になし

Answer 1

適当に

<style>
@media screen and (max-width: 800px) {
  #container{
    grid-template-areas:
    "a b"
    "c c";
  }
}
@media screen and (min-width: 800px) {
  #container{
    grid-template-areas:
    "a b"
    "a c";
  }
}
#container{ 
background-Color:lightgray;
display:grid;
grid-template-areas:
    padding:10px;
    gap:10px;
 }
#A{
background-Color:red;
grid-area:a;
}
#B{
background-Color:blue;
grid-area:b;
}
#C{
background-Color:green;
grid-area:c;
}
}
</style>
<div id="container">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
</div>

Comments

[watermusic]

教えていただいた方法で無事、レイアウトを実現できました◎
grid-template-areasを使ってこういう指定ができるんですね。
とても勉強になりました。
本当にありがとうございました！

Answer 2

PC版とスマホ版のgridレイアウトを定義して、メディアクエリで切り替えると良いかと

Comments

[watermusic]

ありがとうございます。
そうですよね、、レスポンシブで実現できると嬉しいのですが、どうしても出来なかった場合はその方法で対処したいと思います。

[utm.]

であればこのようなデザインはフロートレイアウトになるのかなという感じもします。

[watermusic]

実はfloatも試したのですが、お恥ずかしながら技術不足でうまく実現できなかったのです...
今回は別の方の回答を参考にgridで解決できましたが、アドバイスは本当に嬉しかったです、ありがとうございました！

[utm.]

どうしてもじゃないんかい、