<div id="header">
  <div id="control">
    <div style="display:flex; align-items:center; justify-content: space-between;">
      <h3>Try different layouts</h3>
      <button id="reset" class="btn">&#x21bb Reset</button>
    </div>
    <div class="cluster">
      <button id="btn1" class="btn">Cluster</button>
      <button id="btn2" class="btn">Auto-Grid</button>
      <button id="btn3" class="btn">Flexible-Grid</button>
      <button id="btn4" class="btn">Reel</button>
    </div>
  </div>
  
  <div id="example" class="parent">
    <div class="child code">
      <pre><code><p class="mute">/* CSS */</p><p id="showCode">Hello, World!</p>
      </code></pre>
    </div>
  </div>
</div>

<h5 id="instruct" style="text-align: center;"></h5>
<div id="parent" class="parent">
  <div class="child">Lorem</div>
  <div class="child">Quis</div>
  <div class="child">Vitae</div>
  <div class="child">Fugiat</div>
  <div class="child">Aliquam</div>
  <div class="child">Iusto</div>
  <div class="child">Repellendus</div>
  <div class="child">Molestiae</div>
  <div class="child">Consequuntur</div>
  <div class="child">Quam</div>
</div>

<div id="credit">Layouts by <a href="https://www.youtube.com/embed/p3_xN2Zp1TY" target="_blank">Kevin Powell</a></div>

body {
  background-color: black;
  color: white;
  font-family: arial;
  letter-spacing: .08rem;
  padding: 2rem 1rem;
  box-sizing: border-box;
}
a {
  color: hotpink;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
#credit {
  margin: 2rem 0;
}
#control {
  padding: 1rem;
  margin-bottom: 2rem;
  align-self: center;
  flex-basis: 400px;
  flex-grow: 1;
}
#reset {
  background-color: #000;
  height: unset;
}
#reset:hover {
  background-color: #3C3F4D;
}
.btn {
  background-color: slateblue;
  height: 2.6rem;
  padding: .8rem 1.2rem;
  font-size: 1rem;
  line-height: .5rem;
  color: white;
  border: none;
  border-radius: 30px;
  cursor: pointer;
}
.btn:hover {
  background-color: mediumslateblue;
}
.btn.active:hover {
  background-color: seagreen;
}
.active {
  background-color: mediumseagreen;
}
.parent {
  /*outline: 5px solid #3C3F4D;*/
  border-radius:3px;
  background-color: #3C3F4D;
  padding: 1rem;
}
.child {
  border: 2px solid #5B606E;
  background-color: #212531;
  padding: .8rem;
}
#header {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 1em;
}
.code {
  font-family: Courier;
  color: white;
  padding: 0 1rem;
  height: 10rem;
  overflow-y: scroll;
}
#showCode {
  white-space: break-spaces;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.mute {
  color: #656C84;
}
.mth {
  color: #8AE0DD;
}
.var {
  color: #8AE0A1;
}
.val {
  color: #CCAEF5;
}
.num {
  color: #E84C88;
}
#example {
  flex-basis: 400px;
  flex-grow: 1;
  height: 10rem;
  overflow-y: hidden;
}

.cluster {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.auto-grid {
  --min-col-size: 22rem;
  display: grid;
  gap: 1rem;
  grid-template-columns:
    repeat(auto-fit, minmax(min(var(--min-col-size), 100%), 1fr));
}

.flexible-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flexible-grid > * {
  flex: 1;
}

.reel {
  --gap: 1rem;
  display: grid;
  gap: var(--gap);
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - (var(--gap) / 2));
  /* grid-auto-columns: 30%; */
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-padding: var(--gap);
}

.reel > * {
  scroll-snap-align: start;
}

/* Main with Sidebar Example */

.main-with-sidebar {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 1em;
  margin-top: 6rem;
}

.main-with-sidebar > :first-child {
  flex-basis: 500px;
  flex-grow: 9999; 
}
.main-with-sidebar > :last-child {
  flex-basis: 300px;
  flex-grow: 1; 
}

// Store Buttons
const reset = document.getElementById('reset');
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');
const btn4 = document.getElementById('btn4');
const controls = [reset, btn1, btn2, btn3, btn4];

// Store Parent
const parent = document.getElementById('parent');

// Other variables
const instruct = document.getElementById('instruct');
const showCode = document.getElementById('showCode');

// Reset Layout
reset.addEventListener("click", event => {
    parent.classList.remove("cluster", "auto-grid", "flexible-grid", "reel");
    controls.forEach(element => element.classList.remove("active"));
    instruct.innerHTML = " ";
    showCode.innerHTML = "Hello, World!";
});

btn1.addEventListener("click", event => {
  controls.forEach(element => element.classList.remove("active"));
  btn1.classList.add("active");
  
  parent.classList.remove("auto-grid", "flexible-grid", "reel");
  parent.classList.add("cluster");
  
  instruct.innerHTML = " ";
  showCode.innerHTML = `<span class="val">.cluster</span> {
  display: <span class="val">flex</span>;
  gap: <span class="num">1rem</span>;
  flex-wrap: <span class="val">wrap</span>;
}`;
});

btn2.addEventListener("click", event => {
  controls.forEach(element => element.classList.remove("active"));
  btn2.classList.add("active");
  
  parent.classList.remove("cluster", "flexible-grid", "reel");
  parent.classList.add("auto-grid");
  
  instruct.innerHTML = " ";
  showCode.innerHTML = `<span class="val">.auto-grid</span> {
  <span class="var">--min-col-size</span>: <span class="num">22rem</span>;
  display: <span class="val">grid</span>;
  gap: <span class="num">1rem</span>;
  grid-template-columns:
    <span class="mth">repeat</span>(auto-fit, <span class="mth">minmax</span>(<span class="mth">min</span>(<span class="mth">var</span>(<span class="var">--min-col-size</span>), <span class="num">100%</span>), <span class="num">1fr</span>));
}`;
});

btn3.addEventListener("click", event => {
  controls.forEach(element => element.classList.remove("active"));
  btn3.classList.add("active");
  
  parent.classList.remove("cluster", "auto-grid", "reel");
  parent.classList.add("flexible-grid");
  
  instruct.innerHTML = " ";
  showCode.innerHTML = `<span class="val">.flexible-grid</span> {
  display: <span class="val">flex</span>;
  flex-wrap: <span class="val">wrap</span>;
  gap: <span class="num">1rem</span>;
}

<span class="val">.flexible-grid</span> > * {
  flex: <span class="num">1</span>;
}`
});

btn4.addEventListener("click", event => {
  controls.forEach(element => element.classList.remove("active"));
  btn4.classList.add("active");
  
  parent.classList.remove("cluster", "auto-grid", "flexible-grid");
  parent.classList.add("reel");
  
  instruct.innerHTML = "← Try scrolling →";
  showCode.innerHTML = `<span class="val">.reel</span> {
  <span class="var">--gap</span>: <span class="num">1rem</span>;
  display: <span class="val">grid</span>;
  gap: <span class="var">var(--gap)</span>;
  grid-auto-flow: <span class="val">column</span>;
  grid-auto-columns: <span class="mth">calc</span>(<span class="num">50%</span> - (<span class="mth">var</span>(<span class="var">--gap</span>) / <span class="num">2</span>));
  <span class="mute">/* grid-auto-columns: 30%; */</span>
  overflow-x: <span class="val">scroll</span>;
  scroll-snap-type: <span class="val">x mandatory</span>;
  scroll-padding: <span class="mth">var</span>(<span class="var">--gap</span>);
}

<span class="val">.reel</span> > * {
  scroll-snap-align: <span class="val">start</span>;
}`
});