<main>
  <div class="example">
    <div class="example__demo example__demo--fit-content">
      <div class="grid">
        <div class="grid__col-a">
          <p>Item as wide as the content.</p>
        </div>
        <div class="grid__col-b">
          <p>Item with more text in it. Because the contents of it are wider than the maximum width, it is clamped at 300 pixels.</p>
        </div>
        <div class="grid__col-c">🏄</div>
      </div>
    </div>
  </div>
</main>

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: fit-content(400px) fit-content(400px) 1fr;
  gap: 10px;
}

.grid p {
  padding: 10px;
}

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

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

.grid__col-b {
  background-color: var(--color-hibiscus);
}

.grid__col-c {
  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;
}