レイアウトを簡単に実装できるスタイルシートを紹介します。Gridを使用してdiv要素にclassを付与するだけで実装できます。Gridの特徴JavaScriptは必要なし、CSSのみで実装。六角形のアイテムの高さ・幅、列・行は自由に設定。セル、列、行のモジュラー形式。背景画像を自動入力する機能をサポート。Gridで実装するため、サポートブラウザは下記の通りです。GridではサポートされていないCSSクリップパスを使用しています。img要素をグリッドに配置します。Gridのデモデモでは、レスポンシブ対応の六角形のグリッドを楽しめます。外部ファイル当スタイルシートを外部ファイルとして記述します。HTML親コンテナにユニークなid「#myHexGrid」を指定し、ラッパーに「.hexContainer」、すべてのアイテムに「.hex」を与えます。下記の場合では、6つの六角形が実装されます。class="hex"></div></div></div></div>基本的な実装は、これで完了です。カスタマイズスタイルはSCSSファイルで、カスタマイズできます。