こんにちは牧野です。

デザインって聞くと、「組み合わせ」とか「形」とか「色」とか「全体像」とか「効果的に見せるための特殊なアニメーション」や「画像作り」（.etc）。何万通りもありすぎて圧倒されてしまうし、考える要素がたんまりなんですが、テキスト数は1行60文字（pc画面）とか30~40文字（スマートフォン画面）、フォントの種類の選定、そのテキストの行数によって見せ方を変える考え方は重要のようです。

会社の事業内容や商品紹介をするときに効果的な見せ方として、

こんなんだったり、

こんなんだったりをよく見かけます。

いざ、コーディング

いくつかこのような画面を作るときにflexとか、inline-blockなどを用いて配置を整えたり、いろんなやり方があっても、flexに用意されているプロパティが便利すぎて、なにかと多用してしまいます。しかし、flexとflex-basisを用いてこのような配置でコーディングしたところがテキスト量によって改行量が多くなって、見えている画像の大きさが異なってしまい、あえなくやり直し・・・抜けてました。画像の大きさも本来の大きさに書き出しなおしました（汗）。

FlexとGrid

で、display:gridさんのお世話になっております。

flexだと、画像とテキストの長さが相互に依存してるもんですから、猫画像が縦伸びしてまともな画像が取れないんですが、グリッドだと適当なところで文章を切って小分けにセクション分けできるから新聞記事っぽいレイアウトで人物紹介してみたり、画像についての商品説明を加えてみたりと意味合いの出し方に幅が広がります。align-selfで縦中央配置することやコンテンツごとの比率分割もできるので便利です。

しかし、一部ブラウザでプロパティが読み込まれない場合が場合があるので、ブラウザ対応が必要な場合があるので要注意です。