What your eye is doing
Nearby elements read as a group. Short gaps gather the dots into neighborhoods; the larger gap separates them.
HTML + CSS self-contained example · select to copy
Copy both blocks into an HTML page (put the CSS in a stylesheet or a <style> element). No site styles, images, canvas, SVG, or JavaScript required. Snippets are intended for separate pages; class names are shared.
HTML
<div class="demo" role="img" aria-label="Proximity: Nearby elements read as a group.">
<div class="neighborhood"><div><i class="dot"></i><i class="dot"></i><i class="dot"></i></div><div><i class="dot"></i><i class="dot"></i><i class="dot"></i></div><div><i class="dot"></i><i class="dot"></i><i class="dot"></i></div></div>
</div>CSS
.demo { box-sizing:border-box; position:relative; display:grid; place-items:center; width:100%; min-height:420px; padding:32px; overflow:hidden; background:#102b30; color:#b9f58b; }
.demo *, .demo *::before, .demo *::after { box-sizing:border-box; }
.demo .dot { display:block; width:20px; height:20px; border-radius:50%; background:currentColor; flex-shrink:0; }
@media(max-width:700px) { .demo { min-height:320px; padding:20px; } }
@media(prefers-reduced-motion:reduce) { .demo * { animation:none!important; } }
.neighborhood { display:flex; gap:clamp(35px,8vw,110px); } .neighborhood>div { display:grid; gap:12px; }
