する質問をすることでしか得られない、回答やアドバイスがある。17お世話になります。CSSのレイアウトについて質問させていただきます。些細なことでも構いません。ご助言いただきたく何卒よろしくお願いいたします。前提CSSの経験はほとんどありません。CSSフレームワークのMaterializeを使用して、WordpressのWEBサイトを作成しています。目標レスポンシブなグリッドデザインを用いて、以下のようなレイアウトを構築したいです。スクリーンの幅に合わせて、一行あたりの要素数を変更させ、かつ、テキスト量の異なるカードの高さを統一したいです。現実まず、レスポンシブを有効にするために先の図のようにクラスを定義しましたが、次のようになりました。目標との差異は、次のとおりです。カードの高さが統一されない。余白があるとそこを埋めるように詰まってしまう。#1(適切な作法かわかりませんが)列ブロックの高さを統一するために、行ブロックに「display:flex;」を追加するクラスを新たに定義しました。追加したCSSは以下のとおりです。flex-direction:row;}結果は、次の図のようになりました。この段階での目標との差異は、次のとおりとなりました。列ブロックの高さは統一できたが、カードの高さはバラバラで統一されていない。(materialize.min.cssで定義された)「margin-left:auto;」によって、埋まりきらない行は、列ブロックの左側に余白ができてしまう。#2「margin-left:auto;」を打ち消すために「margin-left:0px;」を追加するクラスを作成しました。CSSは次のとおりです。0px;}この結果、下の図に示すようにレイアウトについては、目標と同じ配置にすることができました。この時点で、目標との差異は、次のとおりとなりました。カードの高さが統一されていない質問カードの高さを統一する方法があればご教示ください。自分の試したことが、作法的に良くない場合や、別の方法があれば、なんなりとご指摘ください。補足事項MaterializeはCDNで利用しています。次の環境で確認しております。(64-bit)実際のHTML(WordPressのDBから取得し繰り返し出力するカード)はPHPで書いていますので、再現用に一部抜粋したHTMLを以下に記載します。(Materialize以外に追加したCSSやカード内のテキスト等は必要に応じて改変してください。</body></html>attachmentクリップ1気になる質問をクリップするクリップした質問は、後からいつでもマイページで確認できます。クリップした質問に回答があった際、通知やメールを受け取ることができます。自分も答えを知りたい質問者以外のユーザにも役立つ評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。質問の評価を上げたことを取り消します低評価-評価を下げられる数の上限に達しました評価を下げることができません1日5回まで評価を下げられます1日に1ユーザに対して2回まで評価を下げられます質問の評価を下げるteratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。コメントをしてください。送信する質問の評価を下げる機能の利用条件この機能を利用するためには、以下の事項を行う必要があります。23:02HTMLを追記いたしました。ご活用いただければ幸いです。HTMLを追記いたしました。ご活用いただければ幸いです。件sort評価が高い順sort新着順sort古い順linkcheckベストアンサー+2とりあえずこういう形かなと。評価が高い回答ほどページの上位に表示されます。remove低評価0回答の評価を下げる下記のような回答は推奨されていません。評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。00:19早速のご回答、誠にありがとうございます。目的の表示が実現できました。(独学のため)理解をきちんと深めておきたいので、お手数でなければ、私の解釈が間違っていないか確認させてください。親要素を基準にして、100%の幅を確保する早速のご回答、誠にありがとうございます。目的の表示が実現できました。(独学のため)理解をきちんと深めておきたいので、お手数でなければ、私の解釈が間違っていないか確認させてください。borderの幅・高さを含めたサイズ指定を可能にするその通りです。値に左右されないように指定してあります。明示しなくても高さを持っているはずです。親要素を基準にして、100%の幅を確保するその通りです。relative;など起点になる親要素の中の一番近い要素を基準にします。値に左右されないように指定してあります。明示しなくても高さを持っているはずです。relative;など起点になる親要素の中の一番近い要素を基準にします。)m大変勉強になりました。0IEでも左寄りの上下中央寄せをcssで実現したい。0IEでflex-box内のitemにpaddingを指定するとカラム落ちする。頂いたご意見への回答は行っておりません。