Skip to content

Commit 47f790d

Browse files
captainbrossetcaptainbrosset
committed
item tolerance syntax demo
1 parent eb98505 commit 47f790d

File tree

2 files changed

+300
-1
lines changed

2 files changed

+300
-1
lines changed

‎css-masonry/README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,5 @@ To try the demos, first enable Masonry:
4040
* [Default track size](https://microsoftedge.github.io/Demos/css-masonry/syntax-examples/default-track-size.html)
4141
* [Custom track sizes](https://microsoftedge.github.io/Demos/css-masonry/syntax-examples/custom-track-sizes.html)
4242
* [Masonry shorthand](https://microsoftedge.github.io/Demos/css-masonry/syntax-examples/masonry-shorthand.html)
43-
* [Spanning multiple tracks](https://microsoftedge.github.io/Demos/css-masonry/syntax-examples/span-multiple-tracks.html)
43+
* [Spanning multiple tracks](https://microsoftedge.github.io/Demos/css-masonry/syntax-examples/span-multiple-tracks.html)
44+
* [Item tolerance](https://microsoftedge.github.io/Demos/css-masonry/syntax-examples/item-tolerance.html)

‎css-masonry/syntax-examples/item-tolerance.html

Lines changed: 298 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,298 @@
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>Item tolerance</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: 200px 200px;
20+
gap: 10px;
21+
item-tolerance: 0;
22+
counter-set: photo-counter 1;
23+
}
24+
25+
main .photo {
26+
height: 100px;
27+
position: relative;
28+
}
29+
30+
main .photo img {
31+
width: 100%;
32+
height: 100%;
33+
object-fit: cover;
34+
display: block;
35+
border-radius: .5rem;
36+
counter-increment: photo-counter;
37+
}
38+
39+
main .photo::before {
40+
content: counter(photo-counter);
41+
position: absolute;
42+
width: 30px;
43+
height: 30px;
44+
display: grid;
45+
place-content: center;
46+
top: calc(50% - 15px);
47+
left: calc(50% - 15px);
48+
border-radius: 50%;
49+
background: #fffd;
50+
}
51+
52+
main .photo:first-child {
53+
height: 110px;
54+
}
55+
56+
.controls {
57+
position: fixed;
58+
top: 10px;
59+
right: 10px;
60+
background: #eee;
61+
padding: 10px;
62+
border-radius: 5px;
63+
}
64+
65+
:has(#item-tolerance-toggle:checked) main {
66+
item-tolerance: 10px;
67+
}
68+
</style>
69+
</head>
70+
71+
<body>
72+
<div class="controls">
73+
<label>
74+
<input type="checkbox" id="item-tolerance-toggle">
75+
Set 10px item-tolerance
76+
</label>
77+
</div>
78+
<main>
79+
<div class="photo">
80+
<img src="../nature/plant02.jpg" alt="Picture of a plant.">
81+
</div>
82+
<div class="photo">
83+
<img src="../nature/plant03.jpg" alt="Picture of a plant.">
84+
</div>
85+
<div class="photo">
86+
<img src="../nature/plant04.jpg" alt="Picture of a plant.">
87+
</div>
88+
<div class="photo">
89+
<img src="../nature/plant21.jpg" alt="Picture of a plant.">
90+
</div>
91+
<div class="photo">
92+
<img src="../nature/plant09.jpg" alt="Picture of a plant.">
93+
</div>
94+
<div class="photo">
95+
<img src="../nature/plant06.jpg" alt="Picture of a plant.">
96+
</div>
97+
<div class="photo">
98+
<img src="../nature/plant07.jpg" alt="Picture of a plant.">
99+
</div>
100+
<div class="photo">
101+
<img src="../nature/plant08.jpg" alt="Picture of a plant.">
102+
</div>
103+
<div class="photo">
104+
<img src="../nature/plant01.jpg" alt="Picture of a plant.">
105+
</div>
106+
<div class="photo">
107+
<img src="../nature/plant15.jpg" alt="Picture of a plant.">
108+
</div>
109+
<div class="photo">
110+
<img src="../nature/plant16.jpg" alt="Picture of a plant.">
111+
</div>
112+
<div class="photo">
113+
<img src="../nature/plant10.jpg" alt="Picture of a plant.">
114+
</div>
115+
<div class="photo">
116+
<img src="../nature/plant11.jpg" alt="Picture of a plant.">
117+
</div>
118+
<div class="photo">
119+
<img src="../nature/plant12.jpg" alt="Picture of a plant.">
120+
</div>
121+
<div class="photo">
122+
<img src="../nature/plant13.jpg" alt="Picture of a plant.">
123+
</div>
124+
<div class="photo">
125+
<img src="../nature/plant14.jpg" alt="Picture of a plant.">
126+
</div>
127+
<div class="photo">
128+
<img src="../nature/plant17.jpg" alt="Picture of a plant.">
129+
</div>
130+
<div class="photo">
131+
<img src="../nature/plant18.jpg" alt="Picture of a plant.">
132+
</div>
133+
<div class="photo">
134+
<img src="../nature/plant19.jpg" alt="Picture of a plant.">
135+
</div>
136+
<div class="photo">
137+
<img src="../nature/plant20.jpg" alt="Picture of a plant.">
138+
</div>
139+
<div class="photo">
140+
<img src="../nature/plant05.jpg" alt="Picture of a plant.">
141+
</div>
142+
<div class="photo">
143+
<img src="../nature/plant22.jpg" alt="Picture of a plant.">
144+
</div>
145+
<div class="photo">
146+
<img src="../nature/plant24.jpg" alt="Picture of a plant.">
147+
</div>
148+
<div class="photo">
149+
<img src="../nature/plant25.jpg" alt="Picture of a plant.">
150+
</div>
151+
<div class="photo">
152+
<img src="../nature/plant26.jpg" alt="Picture of a plant.">
153+
</div>
154+
<div class="photo">
155+
<img src="../nature/plant27.jpg" alt="Picture of a plant.">
156+
</div>
157+
<div class="photo">
158+
<img src="../nature/plant28.jpg" alt="Picture of a plant.">
159+
</div>
160+
<div class="photo">
161+
<img src="../nature/plant29.jpg" alt="Picture of a plant.">
162+
</div>
163+
<div class="photo">
164+
<img src="../nature/plant30.jpg" alt="Picture of a plant.">
165+
</div>
166+
<div class="photo">
167+
<img src="../nature/plant31.jpg" alt="Picture of a plant.">
168+
</div>
169+
<div class="photo">
170+
<img src="../nature/plant01.jpg" alt="Picture of a plant.">
171+
</div>
172+
<div class="photo">
173+
<img src="../nature/plant02.jpg" alt="Picture of a plant.">
174+
</div>
175+
<div class="photo">
176+
<img src="../nature/plant23.jpg" alt="Picture of a plant.">
177+
</div>
178+
<div class="photo">
179+
<img src="../nature/plant32.jpg" alt="Picture of a plant.">
180+
</div>
181+
<div class="photo">
182+
<img src="../nature/plant33.jpg" alt="Picture of a plant.">
183+
</div>
184+
<div class="photo">
185+
<img src="../nature/plant34.jpg" alt="Picture of a plant.">
186+
</div>
187+
<div class="photo">
188+
<img src="../nature/plant35.jpg" alt="Picture of a plant.">
189+
</div>
190+
<div class="photo">
191+
<img src="../nature/plant36.jpg" alt="Picture of a plant.">
192+
</div>
193+
<div class="photo">
194+
<img src="../nature/plant03.jpg" alt="Picture of a plant.">
195+
</div>
196+
<div class="photo">
197+
<img src="../nature/plant04.jpg" alt="Picture of a plant.">
198+
</div>
199+
<div class="photo">
200+
<img src="../nature/plant05.jpg" alt="Picture of a plant.">
201+
</div>
202+
<div class="photo">
203+
<img src="../nature/plant06.jpg" alt="Picture of a plant.">
204+
</div>
205+
<div class="photo">
206+
<img src="../nature/plant07.jpg" alt="Picture of a plant.">
207+
</div>
208+
<div class="photo">
209+
<img src="../nature/plant08.jpg" alt="Picture of a plant.">
210+
</div>
211+
<div class="photo">
212+
<img src="../nature/plant09.jpg" alt="Picture of a plant.">
213+
</div>
214+
<div class="photo">
215+
<img src="../nature/plant11.jpg" alt="Picture of a plant.">
216+
</div>
217+
<div class="photo">
218+
<img src="../nature/plant12.jpg" alt="Picture of a plant.">
219+
</div>
220+
<div class="photo">
221+
<img src="../nature/plant13.jpg" alt="Picture of a plant.">
222+
</div>
223+
<div class="photo">
224+
<img src="../nature/plant14.jpg" alt="Picture of a plant.">
225+
</div>
226+
<div class="photo">
227+
<img src="../nature/plant15.jpg" alt="Picture of a plant.">
228+
</div>
229+
<div class="photo">
230+
<img src="../nature/plant16.jpg" alt="Picture of a plant.">
231+
</div>
232+
<div class="photo">
233+
<img src="../nature/plant17.jpg" alt="Picture of a plant.">
234+
</div>
235+
<div class="photo">
236+
<img src="../nature/plant18.jpg" alt="Picture of a plant.">
237+
</div>
238+
<div class="photo">
239+
<img src="../nature/plant10.jpg" alt="Picture of a plant.">
240+
</div>
241+
<div class="photo">
242+
<img src="../nature/plant19.jpg" alt="Picture of a plant.">
243+
</div>
244+
<div class="photo">
245+
<img src="../nature/plant20.jpg" alt="Picture of a plant.">
246+
</div>
247+
<div class="photo">
248+
<img src="../nature/plant21.jpg" alt="Picture of a plant.">
249+
</div>
250+
<div class="photo">
251+
<img src="../nature/plant22.jpg" alt="Picture of a plant.">
252+
</div>
253+
<div class="photo">
254+
<img src="../nature/plant23.jpg" alt="Picture of a plant.">
255+
</div>
256+
<div class="photo">
257+
<img src="../nature/plant24.jpg" alt="Picture of a plant.">
258+
</div>
259+
<div class="photo">
260+
<img src="../nature/plant25.jpg" alt="Picture of a plant.">
261+
</div>
262+
<div class="photo">
263+
<img src="../nature/plant26.jpg" alt="Picture of a plant.">
264+
</div>
265+
<div class="photo">
266+
<img src="../nature/plant27.jpg" alt="Picture of a plant.">
267+
</div>
268+
<div class="photo">
269+
<img src="../nature/plant28.jpg" alt="Picture of a plant.">
270+
</div>
271+
<div class="photo">
272+
<img src="../nature/plant29.jpg" alt="Picture of a plant.">
273+
</div>
274+
<div class="photo">
275+
<img src="../nature/plant30.jpg" alt="Picture of a plant.">
276+
</div>
277+
<div class="photo">
278+
<img src="../nature/plant31.jpg" alt="Picture of a plant.">
279+
</div>
280+
<div class="photo">
281+
<img src="../nature/plant32.jpg" alt="Picture of a plant.">
282+
</div>
283+
<div class="photo">
284+
<img src="../nature/plant33.jpg" alt="Picture of a plant.">
285+
</div>
286+
<div class="photo">
287+
<img src="../nature/plant34.jpg" alt="Picture of a plant.">
288+
</div>
289+
<div class="photo">
290+
<img src="../nature/plant35.jpg" alt="Picture of a plant.">
291+
</div>
292+
<div class="photo">
293+
<img src="../nature/plant36.jpg" alt="Picture of a plant.">
294+
</div>
295+
</main>
296+
</body>
297+
298+
</html>

0 commit comments

Comments
 (0)