CSS Grid の使い方をマスターして float を卒業しよう | 株式会社ウェブ企画パートナーズ

CSS Grid とは 最近、Web ではグリッドレイアウトを取り入れたデザインが増えてきました。しかしグリッドレイアウトをWeb上で実現するためには float や padding、margin など様々なプロパティを駆使して地道に実装するか、 JavaScript の力を借りるしかありませんでした。 IE9 の正式サポートが終了した今では flexbox を使う方法もありますが、基本的に flexbox は縦方向か横方向のどちらか一方向にコンテンツを並べることは得意ですが、それ以上のことはできません。しかし CSS Grid の登場により、縦方向や横方向の区別がない複雑なレイアウトも比較的簡単にWeb上実現することができるようになりました。 例えば以下のような Pinterest で採用されているレンガ調のレイアウトは flexbox では実現することが難しいですが、CSS Grid

[hima0ri]

memo