React

by brigand

HTML

<div id="app"></div>

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0 5px;
  margin: 5px;
}

.grid > div {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px 0;
}

.grid > div > div { 
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e9e9e9;
}

React

function TodoApp() {
	const items = React.useMemo(() => Array.from({ length: 100 }, (x, index) => ({ index, height: Math.floor(Math.random() * 200) + 20 })), []);
  
  const columns = [[], [], []];
  
  for (let i = 0; i < items.length; i += 1) {
	  const item = items[i];
  	const col = columns[i % columns.length];
    col.push(<div key={i} style={{ height: `${item.height}px` }}>{String(i)}</div>);
  }
  
  return <div className="grid">
    {columns.map((col, i) => <div key={i}>{col}</div>)}
  </div>;
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))