【Masonry】高さが違う画像をグリッドレイアウトでいい感じに並べる②

前回の続きの記事です。

https://qiita.com/weeding_test_5/items/ca53b3842b87d608847a

今回は細かな調整をしていきます。

現在のコード

```index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <p>メイソンリー練習</p>

  <div class="masonry">
    <div class="masonry-item"><img src="https://via.placeholder.com/300x200" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x250" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x180" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x300" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x150" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x220" alt="Placeholder"></div>
  </div>

  <!-- jQueryのCDN -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <!-- MasonryのCDN 本体 -->
  <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

  <!-- imagesLoadedのCDN 画像が全部読み込まれてから動くようにしてくれるもの -->
  <script src="https://cdn.jsdelivr.net/npm/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

  <script>
    $('.masonry').masonry({
      itemSelector: '.masonry-item',
      gutter: 0,
    });
  </script>
</body>
</html>
```

![スクリーンショット 2024-12-14 12.34.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736578/777b0141-6f35-e4bc-9b47-8e303ad510de.png)

---

### Q1：画像の左右の余白を消したい場合は？
### A1：gutterを0にします。

```index.html
  <script>
    $('.masonry').masonry({
      itemSelector: '.masonry-item',
      gutter: 0,  // 左右の余白を削除
    });
  </script>
```

![スクリーンショット 2024-12-14 13.02.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736578/4ba51703-e0a5-6fba-5403-9a9e9c1e6165.png)

---

### Q2：縦に並ぶ画像の間の余白を消したい場合は？
### A2：CSSで画像の親要素のline-heightを0にします。

```index.html
<div class="masonry-item"><img src="https://via.placeholder.com/300x200" alt="Placeholder"></div>
```

```index.html
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
    <style>
    .masonry-item {
      line-height: 0; 
    }
    </style>
    
</head>
```

![スクリーンショット 2024-12-14 12.58.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736578/39cab1ac-11a4-7e33-e079-c75dc45673f1.png)

画像は文字として認識されていて、行間の設定が適応されてしまうので、それを消せばよいのです。

---

縦と横の余白をなくしてみると、以下のようになります。

![スクリーンショット 2024-12-14 18.12.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736578/b1d31780-cb92-91b9-ae19-505eba9a8d0b.png)

---

### Q3：2列にするには？
### A3：画像の親要素のwidthを50%にし、画像のwidthを100%にします。

```index.html
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
    <style>
    .masonry-item {
      line-height: 0; 
      width: 50%;
    }

    img {
      width: 100%;
    }
    </style>
    
</head>
```

![スクリーンショット 2024-12-14 18.28.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736578/392247d2-ccad-81df-863d-41d8bc023213.png)

---

### Q4：3列にして、かつ真ん中の列は幅を大きめにするには？
### A4：まず、親要素のwidthを一旦25%にします。そして、中央の画像の親要素に追加のクラスをつけて、widthを50%にします。

```index.html
<div class="masonry-item"><img src="https://via.placeholder.com/300x200" alt="Placeholder"></div>
<div class="masonry-item large"><img src="https://via.placeholder.com/300x250" alt="Placeholder"></div>
<div class="masonry-item"><img src="https://via.placeholder.com/300x180" alt="Placeholder"></div>
```

```index.html
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
    <style>
    .masonry-item {
      line-height: 0; 
      width: 25%;
    }

    .large {
      width: 50%;
    }

    img {
      width: 100%;
    }
    </style>
    
</head>
```

![スクリーンショット 2024-12-14 18.34.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736578/42ee4b53-1601-8167-b3c0-5853cb766802.png)

--- 

### 全体のコード

```index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .masonry-item {
      line-height: 0; 
      width: 25%;
    }

    .large {
      width: 50%;
    }

    img {
      width: 100%;
    }

  </style>
</head>
<body>

  <p>メイソンリー練習</p>

  <div class="masonry">
    <div class="masonry-item"><img src="https://via.placeholder.com/300x200" alt="Placeholder"></div>
    <div class="masonry-item large"><img src="https://via.placeholder.com/300x250" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x180" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x300" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x150" alt="Placeholder"></div>
    <div class="masonry-item"><img src="https://via.placeholder.com/300x220" alt="Placeholder"></div>
  </div>

  <!-- jQueryのCDN -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <!-- MasonryのCDN 本体 -->
  <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

  <!-- imagesLoadedのCDN 画像が全部読み込まれてから動くようにしてくれるもの -->
  <script src="https://cdn.jsdelivr.net/npm/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

  <script>
    $('.masonry').masonry({
      itemSelector: '.masonry-item',
      gutter: 0,
    });
  </script>
</body>
</html>
```

あとは、画像の高さを調整すれば綺麗に長方形になります。
また機会があれば。


## 参考

https://moshashugyo.com/media/masonry