【グリッド×アニメーション】コード付き！「動くCSSグリッド」のクリエイティブな使用例10選！

ご承知のとおり、CSSグリッドは複雑なレイアウトを作るための従来のやり方をすっかり一新しつつあります。
この新たなスタイルは、グリッドシステムを構築することで、これまでデザイナーがやりそろえなければならなかったこまごました面倒をすべて不要にしました。
どんなデヴァイスにも自動的に適応し、デザイナーが意図したように機能してくれます。
ブラウザ・サポートがまだ限られていますが、すでに多くのデザイナーがこのCSSグリッドをユニークな仕方で使う実験をしています。
本記事では、「使い勝手が良い」ものから思わず「あっ」と言ってしまうようなものまで、10の素敵な使用例を集めました。
CodePenも付記しますので、ぜひご自分でもいろいろ試してみてください。
 
なお、CSSグリッドの基本については以下の記事を参考にしてください。
・CSS入門グリッド作成ガイド【複雑なレイアウトも簡単に作れる！】
グリッドデザイン全般については以下の記事も参考になります。
参考記事：崩さず「崩す」？　上手にグリッドを崩してデザインをレベルアップさせる方法
参考記事：【トレンドデザインの使用法】デザイナー必見！！グリッドデザインを使いこなすためのセオリー6点！
参考記事：CSSグリッドレイアウトはどう進化していくのか？
 
 
１．自動六角形のCSSグリッド・レイアウト
これまでCSS

リンク元