Media objects

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects

by Leon

HTML

<div class="media">

  <div class="img">
    <img src="https://mdn.github.io/css-examples/css-cookbook/balloon-sq2.jpg" alt="Balloons">
  </div>

  <div class="content">
    <p>I have chosen to use Grid Layout for the media object as it allows me to control the layout in two dimensions when I need to. This means that when we have a footer, with short content above, the footer can be pushed down to the bottom of the media
      object.</p>
  </div>
  <div class="footer">
    An optional footer goes here.
  </div>
</div>

<div class="media">

  <div class="img">
    <img src="https://mdn.github.io/css-examples/css-cookbook/sharp-account_box-24px.svg" width="80px" alt="Account">
  </div>
  <div class="content">
    <p>Another reason to use Grid Layout is in order that I can use fit-content() for the track sizing of the image. By using fit-content with a maximum size of 200 pixels, when we have a small image such as the icon, the track only gets as large as the
      size of that image — the max-content size. If the image is larger, the track stops growing at 200 pixels and as the image has a max-width of 100% applied, it scales down so that it continues to fit inside the column.</p>
  </div>
  <div class="footer"></div>
</div>

<div class="media media-flip">

  <div class="img">
    <img src="https://mdn.github.io/css-examples/css-cookbook/balloon-sq2.jpg" alt="Balloons">
  </div>

  <div class="content">
    <p>By using grid-template-areas to achieve the layout, I can see the pattern in the CSS. I define my grid once we have a max-width of 500 pixels, so on smaller devices the media object stacks.</p>
  </div>
  <div class="footer">
    An optional footer goes here.
  </div>
</div>

<div class="media">

  <a class="img">
    <img src="https://mdn.github.io/css-examples/css-cookbook/balloon-sq2.jpg" alt="Balloons">
</a>

  <div class="content">

    <p>An option for the pattern is to flip it to switch the image to the other side — this is done by adding the...

CSS

body {
  font-family: sans-serif, Arial;
}

@media (min-width: 500px) {
  .media {
    display: grid;
    grid-template-columns: fit-content(200px) 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "image content" "image footer";
    grid-gap: 20px;
    margin-bottom: 4em;
  }
  .media-flip {
    grid-template-columns: 1fr fit-content(250px);
    grid-template-areas: "content image" "footer image";
  }
  .media>.media {
    grid-column-start: 2;
  }
  .media-flip>.media {
    grid-column-start: 1;
  }
  .img {
    grid-area: image;
  }
  .content {
    grid-area: content;
  }
  .footer {
    grid-area: footer;
  }
}