JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="content">
  <div class="large">1</div>
  <div class="medium">2</div>
  <div class="small">3</div>
  <div class="small">4</div>
  <div class="medium">5</div>
  <div class="small">6</div>
  <div class="medium">7</div>
  <div class="large">8</div>
  <div class="small">9</div>
  <div class="medium">10</div>
  <div class="small">11</div>
</div>

CSS

:root {
  --scale: 1.618;
  --large: calc(1 / var(--scale));
  --medium: calc(var(--large) / var(--scale));
  --small: calc(var(--medium) / var(--scale));
  --x-small: calc(var(--small) / var(--scale));
}

body {
  margin: 1rem;
}

.content {
  position: relative;
  margin: 0 -1rem -1rem 0;
  width: calc(100% + 1rem);
  font-size: 0;
}

.content::after {
  content: "";
  display: block;
  clear: both;
}

.content>* {
  display: inline-block;
  margin: 0 1rem 1rem 0;
  background-color: lightblue;
  font-size: 1rem;
}


.large {
  width: calc((100% * var(--large)) - 1.01rem);
  min-height: 400px;
}

.medium {
  width: calc((100% * var(--medium)) - 1.01rem);
  min-height: 300px;
}

.small+.small+.large {
  _margin-left: calc((100% * var(--x-small)))
}

.small {
  width: calc((100% * var(--small)) - 1.01rem);
  min-height: 200px;
}

.small+.small {
  width: calc((100% * var(--x-small)) - 1.01rem);
  min-height: 150px;
}