CSSの grid-column と、grid-row を使うなどして、タイル状に敷き詰めるグリッドレイアウトのデザインを表現することができます。
ですが、一部カラム数を変更しようと思うと全体の数を見比べて計算する必要があるので、なかなか大変だったりしますが、jQueryライブラリRect Grid Helper を使うことで簡単に変更することができます。
今回は、jQueryのコピペでタイル状のグリッドレイアウトができるRect Grid Helperについてご紹介します。
グリッドレイアウトとは？
グリッドレイアウトは、画像や配置する要素を格子状に並べることによって、美しく整えられた印象のWebサイトを作るためのデザイン手法です。
以下のように、雑誌の紙面レイアウトやWebページのレイアウトなど、多くのグラフィックがグリッドシステムを用いて作られており、密度感とリズム感の両方を備えたグラフィックを作成することができます。
イラストや写真をタイルのように隙間無く敷き詰めたデザイン
実装後のサンプル
実際のグリッドレイアウトに、正方形の画像を4つ置いたグリッドレイアウトのサンプルです。
グリッドは正方形ではなく、横長の長方形や縦長の長方形など、任意の形で設定することも可能で、レスポンシブにも対応しています。
Rect Grid Helperの導入方法
Rect Grid Helperは、以下の方法で使用することができます。
プラグインを読み込む
公式サイトからRect Grid Helperのプラグインをダウンロードして、HTMLの <head> の中のjQueryの後に記述して読み込みます。
<script src="js/jquery-xxx.min.js"></script>
<script src="js/jquery-rectGridHelper.js"></script>HTMLを記述
HTMLで対象の要素を配置します。
公式サイトの例のように対象とするものを container にして、要素を<div>にしていますが、タグの種類は<a> タグなど、基本的になんでも使えるようです。
<div class="container">
<div class="element1"><img src="https://dubdesign.net/wp-content/uploads/2021/02/gridblock_bl.jpg"></div>
<div class="element2"><img src="https://dubdesign.net/wp-content/uploads/2021/02/gridblock_bl.jpg"></div>
<div class="element3"><img src="https://dubdesign.net/wp-content/uploads/2021/02/gridblock_bl.jpg"></div>
<div class="element4"><img src="https://dubdesign.net/wp-content/uploads/2021/02/gridblock_bl.jpg"></div>
</div>jQueryを記述
最後にbodyのクロージングタグの前に、グリッドを制御するjsを記述します。
ここでマスの大きさや、要素の列と行の数を指定して配置します。
$(function() {
runGridLayout();
$(window).on("load resize", function() {
runGridLayout();
});
function runGridLayout() {
$(".container").rectGridHelper({
"guide": true, //ガイドを表示
"aspectRatio": 1, //縦横の比率 1未満だと縦長、1以上だと横長
"cols": 4, //列の数
"rows": 4, //行の数
//子要素の設定
"children": [
{
"selector": ".element1", //要素1のセレクタ
"col": 2, //要素１の列の数
"row": 2, //要素１の行の数
"left": 1, //要素１の横方向の位置（列の位置）
"top": 1 //要素１の縦方向の位置（行の位置）
},
{
"selector": ".element2", //要素2のセレクタ
"col": 1, //要素2の列の数
"row": 1, //要素2の行の数
"left": 3, //要素2の横方向の位置（列の位置）
"top": 2 //要素2の縦方向の位置（行の位置）
},
{
"selector": ".element3", //要素3のセレクタ
"col": 2, //要素3の列の数
"row": 1, //要素3の行の数
"left": 3, //要素3の横方向の位置（列の位置）
"top": 3 //要素3の縦方向の位置（行の位置）
},
{
"selector": ".element4", //要素4のセレクタ
"col": 1, //要素2の列の数
"row": 1, //要素2の行の数
"left": 4, //要素2の横方向の位置（列の位置）
"top": 1 //要素2の縦方向の位置（行の位置）
}
]
});
}
});参考サイト
参考グリッド状のレイアウトを補助するjQueryプラグイン作りましたSTERFIELD
