.jpg)
01
.jpg)
02
.jpg)
03
.jpg)
04
.jpg)
05
.jpg)
06
.jpg)
07
.jpg)
08
.jpg)
09
.jpg)
10
.jpg)
11
.jpg)
12
.jpg)
13
.jpg)
14
.jpg)
15
.jpg)
16
.jpg)
17
.jpg)
18
.jpg)
19
.jpg)
20
.jpg)
21
.jpg)
22
.jpg)
23
.jpg)
24
.jpg)
25
.jpg)
26
.jpg)
27
.jpg)
28
.jpg)
29
.jpg)
30
.jpg)
31
.jpg)
32
.jpg)
33
.jpg)
34
.jpg)
35
.jpg)
36
.jpg)
37
.jpg)
38
.jpg)
39
.jpg)
40
.jpg)
41
.jpg)
42
While we wait for all browsers to support the new name for Masonry layouts, Grid Lanes, this is perhaps the simplest CSS only responsive emulation for this type of layout.
All you need to know is to know the aspect ratio (width and height of the images) and add this as an inline style for each image
For example, the first image width and height is 1024px by 1280px so the html for the image line is:
<div style="--aspect: calc(1024/1280);"><img src="columns/pic1 (1).jpg" ><p>01</p></div>
The CSS in the page head is very small and commented to enable you to adjust the number of images on each line.