Media objects with fit-content

by Denis Tverdokhlebov

HTML

<div class="media">
  <div class="image">
    <img src="http://placehold.it/100x100/ffffff/000000" alt="placeholder">
  </div>
  <div class="content">
    This media object has a very small image, perhaps an icon. In this case I do not want a large space reserved for the image, and want the text to take up more space.
  </div>
  
</div>

<div class="media">
  <div class="image">
    <img src="http://placehold.it/400x300/ffffff/000000" alt="placeholder">
  </div>
  <div class="content">
    This media object has a larger image, it may be larger than the column track so I want it to size down once it hits the maximum size.
  </div>
  
</div>

CSS

* { box-sizing: border-box; }

body {
  padding: 40px;
  background-color: rgb(39,69,79);
  font: 1.2em/1.4 Helvetica, sans-serif;
}

img {
  max-width: 100%;
}

.media {
  width: 500px;
  margin-bottom: 2em;
  padding: 10px;
  font-weight: bold;
  border-radius: 10px;
  border:5px solid rgb(255,255,255);
  background-color: rgba(255,255,255,.7);
  display: grid;
  grid-gap: 20px;
  grid-template-columns: fit-content(250px) 1fr;
}