<header class="header">
  <div class="header__title">
    <h1>
      <code>minmax()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/minmax">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#search=minmax()">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, we have two <code>minmax()</code> function arguments present in our <code>grid-template-columns</code> property:
    </p>
    <ol>
      <li>The first <code>minmax()</code> function tells the browser to make the first column a maximum width of <code>100px</code>, and a minimum width of <code>10px</code>.</li>
      <li>The third column uses our second <code>minmax()</code> function. It tells the browsers to make the third column a minimum width of <code>300px</code>, and a maximum width of <code>15rem</code>.</li>
    </ol>
    <p>
      The second column has a width of <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#The_fr_Unit">1fr</a></code>. It will expand to fill the remaining width.
    </p>

    <div class="example__demo example__demo--minmax">
      <div class="grid">
        <div class="grid__col-1"></div>
        <div class="grid__col-2"></div>
        <div class="grid__col-3">
          <p>I am a sentence that contains exactly nine words.</p>
        </div>
      </div>
    </div>
    
    <p>
      Try resizing this Pen's width to see how <code>minmax()</code> works.
    </p>
  </div>
</main>

// Demo
.grid {
  display: grid;
  grid-template-columns: minmax(10px, 100px) 1fr minmax(min-content, 300px);
  height: var(--size-giga);
}

.grid__col-1 {
  background-color: var(--color-sand);
}

.grid__col-2 {
  border: 2px dashed var(--color-cerulean);
  background-color: rgba(2, 166, 242, 0.2);
}

.grid__col-3 {
  background-color: var(--color-sand);
}


// Pen Setup
.example__demo--minmax {
  padding: 0.75rem;
  
  p {
    color: var(--color-cinder);
    line-height: 1.25;
    padding: 0.5rem;
  }
}

.grid__col-1 {
  font-size: 2rem;
}