インスタ風ギャラリーの作り方

サイズがバラバラな写真達をインスタのプロフィール画面風にピシッと正方形に並べるギャラリーレイアウトを紹介します。見栄えよくもちろんレスポンシブ対応！とっても便利ですよ！

完成系

See the Pen
gallery by TAKU HONGO (@taku_webdesign)
on CodePen.

※スマホの場合は、Resultをタップしてください。

作り方

基本のHTMLコーディング

ulにgalleryクラスを付与します。

※li内は写真の数ぶん作ります。

<ul class="gallery">
    <li>
      <figure>
        <img src="image01.jpg" alt="">
      </figure>
    </li>
    <li>
      <figure>
        <img src="image02.jpg" alt="">
      </figure>
    </li>
    <li>
      <figure>
        <img src="image03.jpg" alt="">
      </figure>
    </li>

CSSコーディング①　基本のCSS設計

余白や背景色を指定します。

* {
  padding: 0;
  margin: 0;
  list-style-type: none;
  box-sizing: border-box;
}

body {
  background: #000;
}

CSSコーディング②　画像の外枠を作る

横幅いっぱいに横並びするようdisplay  flex　と　width 100vw　を指定します。

flex-wrap  wrapにより、画像が折り返しされます。

li　は均等３分割されるよう、％指定します。

.gallery {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  margin: 50px auto;
}

li {
  width: 33.33%;
}

CSSコーディング③　画像を正方形に整形する

高さの縦横比を　padding-top　で100%指定します。

img　に　object-fit cover　で、枠内にトリミングされます。

object-fi :coverが適用されるため、width　と　height　を100％指定します。

figure {
  position: relative;
  padding-top: 100%;
}

img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
}

できあがり！

追加：タブレット・PC表示レイアウト

このままだと、画面横幅が広くなった際に無限に写真が大きくなってしまいます。

メディアクエリを設定することで、画面横幅スマホサイズを超えた際に

ギャラリーの横幅に最大値が設定され、写真同士に余白もできて

見栄え・使い勝手がよくなります。

@media screen and (min-width:760px) {
  .gallery {
    max-width: 760px;
  }

  li {
    width: calc(33.33% - 10px);
    margin: 0 0 10px 10px;
  }
}

ご自身でgalleryのmax-widthや、li要素のwidthやmarginを調整して

ちょうどいいレイアウトを探すのもおもしろいですね。