Skip to content

Commit 4b12ea1

Browse files
captainbrossetcaptainbrosset
committed
Add test cases for blog post
1 parent e2cda4f commit 4b12ea1

File tree

6 files changed

+1530
-0
lines changed

6 files changed

+1530
-0
lines changed

‎css-masonry/tests/custom-track-sizes.html

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Custom track sizes</title>
8+
<style>
9+
body {
10+
margin: 0 3rem;
11+
font-family: system-ui;
12+
font-size: 1rem;
13+
}
14+
15+
main {
16+
max-width: 1800px;
17+
margin: 3rem auto;
18+
display: masonry;
19+
masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
20+
gap: 10px;
21+
}
22+
23+
main .photo img {
24+
width: 100%;
25+
display: block;
26+
border-radius: .5rem;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
<main>
33+
<div class="photo">
34+
<img src="../nature/plant02.jpg" alt="Picture of a plant.">
35+
</div>
36+
<div class="photo">
37+
<img src="../nature/plant03.jpg" alt="Picture of a plant.">
38+
</div>
39+
<div class="photo">
40+
<img src="../nature/plant04.jpg" alt="Picture of a plant.">
41+
</div>
42+
<div class="photo">
43+
<img src="../nature/plant21.jpg" alt="Picture of a plant.">
44+
</div>
45+
<div class="photo">
46+
<img src="../nature/plant09.jpg" alt="Picture of a plant.">
47+
</div>
48+
<div class="photo">
49+
<img src="../nature/plant06.jpg" alt="Picture of a plant.">
50+
</div>
51+
<div class="photo">
52+
<img src="../nature/plant07.jpg" alt="Picture of a plant.">
53+
</div>
54+
<div class="photo">
55+
<img src="../nature/plant08.jpg" alt="Picture of a plant.">
56+
</div>
57+
<div class="photo">
58+
<img src="../nature/plant01.jpg" alt="Picture of a plant.">
59+
</div>
60+
<div class="photo">
61+
<img src="../nature/plant15.jpg" alt="Picture of a plant.">
62+
</div>
63+
<div class="photo">
64+
<img src="../nature/plant16.jpg" alt="Picture of a plant.">
65+
</div>
66+
<div class="photo">
67+
<img src="../nature/plant10.jpg" alt="Picture of a plant.">
68+
</div>
69+
<div class="photo">
70+
<img src="../nature/plant11.jpg" alt="Picture of a plant.">
71+
</div>
72+
<div class="photo">
73+
<img src="../nature/plant12.jpg" alt="Picture of a plant.">
74+
</div>
75+
<div class="photo">
76+
<img src="../nature/plant13.jpg" alt="Picture of a plant.">
77+
</div>
78+
<div class="photo">
79+
<img src="../nature/plant14.jpg" alt="Picture of a plant.">
80+
</div>
81+
<div class="photo">
82+
<img src="../nature/plant17.jpg" alt="Picture of a plant.">
83+
</div>
84+
<div class="photo">
85+
<img src="../nature/plant18.jpg" alt="Picture of a plant.">
86+
</div>
87+
<div class="photo">
88+
<img src="../nature/plant19.jpg" alt="Picture of a plant.">
89+
</div>
90+
<div class="photo">
91+
<img src="../nature/plant20.jpg" alt="Picture of a plant.">
92+
</div>
93+
<div class="photo">
94+
<img src="../nature/plant05.jpg" alt="Picture of a plant.">
95+
</div>
96+
<div class="photo">
97+
<img src="../nature/plant22.jpg" alt="Picture of a plant.">
98+
</div>
99+
<div class="photo">
100+
<img src="../nature/plant24.jpg" alt="Picture of a plant.">
101+
</div>
102+
<div class="photo">
103+
<img src="../nature/plant25.jpg" alt="Picture of a plant.">
104+
</div>
105+
<div class="photo">
106+
<img src="../nature/plant26.jpg" alt="Picture of a plant.">
107+
</div>
108+
<div class="photo">
109+
<img src="../nature/plant27.jpg" alt="Picture of a plant.">
110+
</div>
111+
<div class="photo">
112+
<img src="../nature/plant28.jpg" alt="Picture of a plant.">
113+
</div>
114+
<div class="photo">
115+
<img src="../nature/plant29.jpg" alt="Picture of a plant.">
116+
</div>
117+
<div class="photo">
118+
<img src="../nature/plant30.jpg" alt="Picture of a plant.">
119+
</div>
120+
<div class="photo">
121+
<img src="../nature/plant31.jpg" alt="Picture of a plant.">
122+
</div>
123+
<div class="photo">
124+
<img src="../nature/plant01.jpg" alt="Picture of a plant.">
125+
</div>
126+
<div class="photo">
127+
<img src="../nature/plant02.jpg" alt="Picture of a plant.">
128+
</div>
129+
<div class="photo">
130+
<img src="../nature/plant23.jpg" alt="Picture of a plant.">
131+
</div>
132+
<div class="photo">
133+
<img src="../nature/plant32.jpg" alt="Picture of a plant.">
134+
</div>
135+
<div class="photo">
136+
<img src="../nature/plant33.jpg" alt="Picture of a plant.">
137+
</div>
138+
<div class="photo">
139+
<img src="../nature/plant34.jpg" alt="Picture of a plant.">
140+
</div>
141+
<div class="photo">
142+
<img src="../nature/plant35.jpg" alt="Picture of a plant.">
143+
</div>
144+
<div class="photo">
145+
<img src="../nature/plant36.jpg" alt="Picture of a plant.">
146+
</div>
147+
<div class="photo">
148+
<img src="../nature/plant03.jpg" alt="Picture of a plant.">
149+
</div>
150+
<div class="photo">
151+
<img src="../nature/plant04.jpg" alt="Picture of a plant.">
152+
</div>
153+
<div class="photo">
154+
<img src="../nature/plant05.jpg" alt="Picture of a plant.">
155+
</div>
156+
<div class="photo">
157+
<img src="../nature/plant06.jpg" alt="Picture of a plant.">
158+
</div>
159+
<div class="photo">
160+
<img src="../nature/plant07.jpg" alt="Picture of a plant.">
161+
</div>
162+
<div class="photo">
163+
<img src="../nature/plant08.jpg" alt="Picture of a plant.">
164+
</div>
165+
<div class="photo">
166+
<img src="../nature/plant09.jpg" alt="Picture of a plant.">
167+
</div>
168+
<div class="photo">
169+
<img src="../nature/plant11.jpg" alt="Picture of a plant.">
170+
</div>
171+
<div class="photo">
172+
<img src="../nature/plant12.jpg" alt="Picture of a plant.">
173+
</div>
174+
<div class="photo">
175+
<img src="../nature/plant13.jpg" alt="Picture of a plant.">
176+
</div>
177+
<div class="photo">
178+
<img src="../nature/plant14.jpg" alt="Picture of a plant.">
179+
</div>
180+
<div class="photo">
181+
<img src="../nature/plant15.jpg" alt="Picture of a plant.">
182+
</div>
183+
<div class="photo">
184+
<img src="../nature/plant16.jpg" alt="Picture of a plant.">
185+
</div>
186+
<div class="photo">
187+
<img src="../nature/plant17.jpg" alt="Picture of a plant.">
188+
</div>
189+
<div class="photo">
190+
<img src="../nature/plant18.jpg" alt="Picture of a plant.">
191+
</div>
192+
<div class="photo">
193+
<img src="../nature/plant10.jpg" alt="Picture of a plant.">
194+
</div>
195+
<div class="photo">
196+
<img src="../nature/plant19.jpg" alt="Picture of a plant.">
197+
</div>
198+
<div class="photo">
199+
<img src="../nature/plant20.jpg" alt="Picture of a plant.">
200+
</div>
201+
<div class="photo">
202+
<img src="../nature/plant21.jpg" alt="Picture of a plant.">
203+
</div>
204+
<div class="photo">
205+
<img src="../nature/plant22.jpg" alt="Picture of a plant.">
206+
</div>
207+
<div class="photo">
208+
<img src="../nature/plant23.jpg" alt="Picture of a plant.">
209+
</div>
210+
<div class="photo">
211+
<img src="../nature/plant24.jpg" alt="Picture of a plant.">
212+
</div>
213+
<div class="photo">
214+
<img src="../nature/plant25.jpg" alt="Picture of a plant.">
215+
</div>
216+
<div class="photo">
217+
<img src="../nature/plant26.jpg" alt="Picture of a plant.">
218+
</div>
219+
<div class="photo">
220+
<img src="../nature/plant27.jpg" alt="Picture of a plant.">
221+
</div>
222+
<div class="photo">
223+
<img src="../nature/plant28.jpg" alt="Picture of a plant.">
224+
</div>
225+
<div class="photo">
226+
<img src="../nature/plant29.jpg" alt="Picture of a plant.">
227+
</div>
228+
<div class="photo">
229+
<img src="../nature/plant30.jpg" alt="Picture of a plant.">
230+
</div>
231+
<div class="photo">
232+
<img src="../nature/plant31.jpg" alt="Picture of a plant.">
233+
</div>
234+
<div class="photo">
235+
<img src="../nature/plant32.jpg" alt="Picture of a plant.">
236+
</div>
237+
<div class="photo">
238+
<img src="../nature/plant33.jpg" alt="Picture of a plant.">
239+
</div>
240+
<div class="photo">
241+
<img src="../nature/plant34.jpg" alt="Picture of a plant.">
242+
</div>
243+
<div class="photo">
244+
<img src="../nature/plant35.jpg" alt="Picture of a plant.">
245+
</div>
246+
<div class="photo">
247+
<img src="../nature/plant36.jpg" alt="Picture of a plant.">
248+
</div>
249+
</main>
250+
</body>
251+
252+
</html>

0 commit comments

Comments
 (0)