<header class="header">
  <div class="header__title">
    <h1>
      <code>fit-content()</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/fit-content">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#search=fit-content()">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, we are using an argument of <code>250px</code> for the <code>fit-content()</code> function. This tells the browser to restrict the first grid column to a width of 350px, causing the text content to break to a new line to fit:
    </p>

    <div class="example__demo example__demo--fit-content">
      <div class="grid">
        <div class="grid__col-a">
          <blockquote>
            <p>The simple act of paying attention can take you a long way.</p>
            <footer>
              <p><cite>Keanu Reeves</cite></p>
            </footer>
          </blockquote>    
        </div>
        <div class="grid__col-b">🏄</div>
      </div>
    </div>
    
    <p>
      The other value for <code>grid-template-columns</code>, <code>1fr</code>, tells the browser to distribute the remaining space evenly by a factor of one. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#The_fr_Unit">The <code>fr</code> unit is relatively new</a>, designed to be used with CSS Grid.
    </p>
  </div>
</main>

// Demo
.grid {
  display: grid;
  grid-template-columns: fit-content(250px) 1fr;
}


// Pen Setup
.example__demo--fit-content {
  color: var(--color-cinder);
  padding: 0.5rem;
}

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

.grid__col-b {
  align-items: center;
  background: var(--color-cerulean) url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/memphis-mini.png") repeat;
  display: flex;
  font-size: var(--size-beta);
  justify-content: center;
}

blockquote {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: var(--size-zeta);
}

footer {
  margin-top: var(--size-zeta);
}

cite {
  border-top: 2px solid var(--color-white);
  font-size: var(--size-legal);
  font-style: normal;
  font-weight: 400;
  padding-top: 0.3rem;
}