質問: お世話になります。 CSSのレイアウトについて質問させていただきます。 ### 前提 CSSの経験はほとんどありません。 CSSフレームワークのMaterializeを使用して、WordpressのWEBサイトを作成しています。 ### 目標 レスポンシブなグリッドデザインを用いて、以下のようなレイアウトを構築したいです。 ![完成イメージ](https://teratail.storage.googleapis.com/uploads/contributed_images/2b6350d3824630b43dfceda16aca4e27.png) A,B,Cには画像やテキストをが含まれますが、それらはWordpressから取得するサイズが不定のものなので、各ブロックの高さが変動します。 例えば、 B1の高さ > C-1とC-2の高さの合計 の時は、C-2の下に余白ができ、 B2の高さ < C-3とC-4の高さの合計 の時は、B-2の下に余白ができるようにしたいです。 (最終的には、「余白」は塗りつぶして(拡張して?)、上の図の様に綺麗に整形したい考えです(※1)) ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/1ccc247a63f2b37478e2f9381777341d.png) ### 現状・課題 「A」と「B,C」をdivで囲い”row”クラスを定義し、 「A」には「col s12 m4」、「B,C」には「col s12 m8」を定義し並べています。 また、同様に「B」「C」を並べるためにそれぞれ「col s12 m6」を定義しています。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/455a6c53920a61623b897bee6c4ad95d.png) 図の吹出しの通り、C-1,C-2の高さの合計がB-1に満たない時、B-2が右側に回り込んでしまう事が課題です。 また、回り込みが回避できた場合、余白を埋める方法(※1の解決策)についてもアドバイスいただけたら幸甚です。 ### 該当のソースコード ``` A B-1 C-1 C-2 B-2 C-3 C-4 ``` 本コードに関してCSSはカスタマイズしておらず、CDNで読み込んだMaterializeのグリッドデザインを使用しています。 以上、アドバイスのほど、何卒よろしくお願いいたします。
回答: B-1, C-1, C-2 と B-2, C-3, C-4 のグループをそれぞれ~で囲めばいいのではないでしょうか? デモページ