【サンプル】自作ギャラリー３｜ギャップを使用【noindex】

デザインを整える用のサンプル記事です。

変更場所
3列のcss例

3列のギャラリー
5列のギャラリー
6列のギャラリー
ギャラリーボックス

変更場所

html変更場所：
<div class=”grid-container grid-container⬤“>~
<div class=”item⬤ pic-hover”>~

⬤の位置を列数に変える。

cssでは、赤文字の部分を変更。

.grid-container5 {
background: #fff;
padding: 0px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(18%, 1fr));
margin-bottom:1em;
gap:3px;
}

％は列の数を決める。（例は5列）
margin-bottomは全体のコンテナと、次の文章との間。（margin-topも調整が必要かも。）
gapは上下左右の画像の間。

.item5{
margin-top:-.65em;
}

画像を入れる前に、上下左右すべての画像がくっつくようにしたい。そこで、itemで上下の差を埋める。
ここは列にいれる画像の数によって何故か高さがちがってくるので、それぞれ別々のmargin-topの数値が必要になってくる。

新しい形のギャラリーをつくるときは、以下のような手順が必要になる。

.grid-container⬤{grid-template-columnsの％を変えて、列の数を決める
gapを一旦消す。（これがあると、ステップ３で行う上下の隙間調整ができない）
.item⬤{margin-topを調整して、画像の上下の隙間をなくす
ステップ２で消したgrid-container⬤{gapの数値をかえ挿入
grid-container⬤{margin-bottom(margin-top)でギャラリー全体の調整

3列のcss例

※.grid-container imgとdiv.pic-hover:hoverは共通で使えるので、複製は必要なし。

/************************************
** 自作ギャラリーパート３
************************************/

/*3個を入れるとき */
.grid-container3 {/*3個を入れるとき */
  background: #fff;
  padding: 0px; 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
 margin-bottom:1em;
	gap:3px;
}


.grid-container img{/*共通 */
  width: 100%;
  height: auto;
	aspect-ratio: 1/1;
	object-fit: cover;	
}
	
div.pic-hover:hover {/*共通 */
  border: 1px solid #f7f7f7;
}


.item3{/*3個を入れるとき */
	margin-top:-.66em;
	
}