<header class="header">
  <div class="header__title">
  <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>

  <div class="example">
      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:

    <div class="example__demo example__demo--fit-content">
      <div class="grid">
        <div class="grid__col-a">
            <p>The simple act of paying attention can take you a long way.</p>
              <p><cite>Keanu Reeves</cite></p>
        <div class="grid__col-b">🏄</div>
      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.
// 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;
View Compiled
Run Pen

External CSS

  1. https://codepen.io/ericwbailey/pen/vMXWgz.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.