2022年11月14日URLをコピーしました!カード型レイアウトを作成していて、テキスト量が異なる場合にボタンの高さが揃わず苦労しました。解決策を備忘録として記事にまとめます。以下より、今回の実装で関係のあるところだけ抜粋してコードを書いていきます。center;}記事の横並びはGridを使いました。「.c-card」にFlexを使って縦並びにして、画像>タイトル>テキスト>ボタンの順に変更しています。ボタンの高さを揃えるまず、「.l-grid」の子要素である「.l-grid__item」にFlexを使って縦並びにします。次に、「l-grid」の孫要素である「.c-card」にflex-grow:1;を指定します。「.p-card__action」にmargin-top:auto;を指定すればボタンの高さが揃います。まとめflex-growやflex-shrinkなどFlexのプロパティについてまだまだ疎いので、MDN読んだり実際に使用してFlexと仲良くなりたいです。