cpeak.github.com/swap.html at main · cpeak/cpeak.github.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82


  <hr />
  <h2>Flex Grid (Example 1: Masonry Grid - Horizontal)</h2>
  <p>This grid is from the Figma file Masonry Grid Horizontal. No Masonry so you're at the mercey of photo order. Can justify left, right, centered, and space between like the example</p>
  <div class="grid-test">
    {% for photo in site.data.gallery %}
      <div class="grid-item {{ photo.size }} orientation-{{ photo.orientation }}">
        <img src="{{ photo.url }}" alt="wat">
      </div>
    {% endfor %}
  </div>


  <hr />
  <h2>Masonry Grid (Example 2: Masonry Grid - Vertical)</h2>
  <p>This is using Masonry and is close to Masonry Grid: Vertical, but you're again at the mercy of image placement, so you might have clean row breaks or you may have the mixed</p>
  <div class="grid vertical">
    {% for photo in site.data.gallery %}
      <div class="grid-item {{ photo.size }} orientation-{{ photo.orientation }}">
        <img src="{{ photo.url }}" alt="wat">
      </div>
    {% endfor %}
  </div>

  <hr />
  <h2>Masonry Grid - Horizontal</h2>
  <p>3 column grid approach using the A paper ratios. Note in some spots the images land at the halfway mark of the images in the neighboring columns</p>
  <div class="grid masonry-horizontal">
    {% for photo in site.data.gallery %}
      <div class="grid-item {{ photo.size }} orientation-{{ photo.orientation }}">
        <img src="{{ photo.url }}" alt="wat">
      </div>
    {% endfor %}
  </div>

  <hr />
  <h2>Grid - Horizontal</h2>
  <p>This is a NO MASONRY approach to a 3 column grid, where the vertical and square images don't bork the layout</p>
  <div class="grid--horizontal">
    {% for photo in site.data.gallery %}
      <div class="grid-item {{ photo.size }} orientation-{{ photo.orientation }}">
        <img src="{{ photo.url }}" alt="wat">
      </div>
    {% endfor %}
  </div>

  <hr />
  <h2>Masonry Grid Rough</h2>
  <p>This is the standard Masonry layout using the A paper ratios. Im noticing some gaps</p>
  <div class="grid">
    {% for photo in site.data.gallery %}
      <div class="grid-item {{ photo.size }} orientation-{{ photo.orientation }}">
        <img src="{{ photo.url }}" alt="wat">
      </div>
    {% endfor %}
  </div>

  <hr />
  <h2>Uniform Grid</h2>
  <p>Straight forwards, setting 1:1 aspect ratio and object fit to cover. Easy</p>

  <div class="gallery__uniform-grid">
    {% for photo in site.data.gallery %}
      <img src="{{ photo.url }}" alt="wat">
    {% endfor %}
  </div>

</div>

<script src="/js/masonry.pkgd.min.js"></script>
 <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>

<script>

  $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-item', // Use the .grid-item's width for column calculation
    gutter: 0,                 // You can use the CSS padding for spacing instead of gutter
    transitionDuration: '0.3s' // Smooth transitions when resizing/reordering
})
</script>