69194293

Answer to https://stackoverflow.com/questions/69194293/

by Gust van de Wal

HTML

<div class="tag-cloud">
  <div class="tag-list nav-scroll">
    <span class="tag-chip">6000</span>
    <span class="tag-chip">alagadda</span>
    <span class="tag-chip">artifact</span>
    <span class="tag-chip">audio</span>
    <span class="tag-chip">biological</span>
    <span class="tag-chip">blackwood</span>
    <span class="tag-chip">_cc</span>
    <span class="tag-chip">co-authored</span>
    <span class="tag-chip">container</span>
    <span class="tag-chip">d-11424</span>
    <span class="tag-chip">daevite</span>
    <span class="tag-chip">deer-college</span>
    <span class="tag-chip">doctor-light</span>
    <span class="tag-chip">doctor-mcdoctorate</span>
    <span class="tag-chip">entropic</span>
    <span class="tag-chip">esoteric-class</span>
    <span class="tag-chip">ethics-committee</span>
    <span class="tag-chip">faeowynn-wilson</span>
    <span class="tag-chip">global-occult-coalition</span>
    <span class="tag-chip">grand-karcist-ion</span>
    <span class="tag-chip">hanged-king</span>
    <span class="tag-chip">hy-brasil</span>
    <span class="tag-chip">interactive</span>
    <span class="tag-chip">la-rue-macabre</span>
    <span class="tag-chip">_licensebox</span>
    <span class="tag-chip">meta</span>
    <span class="tag-chip">metallic</span>
    <span class="tag-chip">narrative</span>
    <span class="tag-chip">on-guard-43</span>
    <span class="tag-chip">portal</span>
    <span class="tag-chip">religious</span>
    <span class="tag-chip">ritual</span>
    <span class="tag-chip">s&amp;c-plastics</span>
    <span class="tag-chip">scp</span>
    <span class="tag-chip">serpents-hand</span>
    <span class="tag-chip">spacetime</span>
    <span class="tag-chip">temporal</span>
    <span class="tag-chip">three-moons-initiative</span>
    <span class="tag-chip">three-portlands</span>
    <span class="tag-chip">wanderers-library</span>
    <span class="tag-chip">weapon</span>
    <span class="tag-chip">specialist</span>
    <span...

CSS

* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; color: #FFF; }

:root {
  --gap: 0.5rem;
}

.tag-cloud {
  display: flex;
}

.tag-list {
  flex-shrink: 0;
  padding: var(--gap);
  background-color: hsl(230deg, 90%, 17%);
}

.tag-list:not(.grid) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: 100%;
}

@supports (grid-template-columns: masonry) {
  .tag-list.grid {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: masonry;
    grid-auto-flow: row; /* this doesn't work, as it is implicitly set to `column` because of the masonry layout */
    gap: var(--gap);
    min-width: 100%;
  }
}

@supports not (grid-template-columns: masonry) {
  .tag-list.grid {
    column-count: 3;
    column-gap: 0;
    width:  max-content;
    height: min-content;
    writing-mode: vertical-lr;
    padding-right:  0;
    padding-bottom: 0;
  }

  .tag-list.grid .tag-chip {
    margin-right: var(--gap);
    writing-mode: horizontal-tb;
  }
}

.tag-chip {
  padding: 1em;
  border: 1px solid;
  border-radius: 0.25em;
}

JavaScript

function recalc(container) {
  const list  = container.firstElementChild
  const chips = list.children

  for (let i = 0, rows = 0, topTracker; i < chips.length; i++) {
    const { top } = chips[i].getBoundingClientRect()
  	if (topTracker !== top) {
      if (++rows === 4) {
        list.classList.add('grid')
        break
      }
      topTracker = top
    }
  }
}

recalc(document.querySelector('.tag-cloud'))