CSS Gridを使って六角形のオブジェクトを並べたハニカムなレイアウトを組めるスタイルシート・「Hexi-Flexi-Grid」

Ads

Hexi-Flexi-Grid


Hexi-Flexi-Gridはハニカム構造のレイアウトを組めるCSSグリッドシステムです。JavaScriptは使われておらず、CSS Gridベース、六角形はclip-pathが使われています。こういうのに社員の写真を入れてスタッフ紹介ページに作る、みたいなのたまに見かけますね。ただ、対応ブラウザが限られるのでその辺はご注意ください。特にclip-pathはIEもEdgeも非対応です。

コードは長くなりますが六角形ならSVGでも可能ですので用途に合わせて使うとよさそうですね。

Hexi-Flexi-Grid