pinafore/routes/_components/status/MediaAttachments.html

<div class="status-media
            {sensitive ? 'status-media-is-sensitive' : ''}
            {oddCols ? 'odd-cols' : ''}
            {twoCols ? 'two-cols' : ''}
            {$groupedImages ? 'grouped-images' : ''}
            "
     style="grid-template-columns: repeat({nCols}, 1fr); " >
  {#each mediaAttachments as media}
    <Media {media} {uuid} />
  {/each}
</div>
<style>
  .status-media {
    grid-area: media;
    display: grid;
    align-items: center;
    justify-content: center;
    justify-items: center;
    grid-column-gap: 5px;
    grid-row-gap: 5px;

    overflow: hidden;
    max-width: calc(100vw - 40px);
    margin: 10px 10px 10px 5px;
  }

  .status-media.grouped-images {
    grid-area: media-grp;
    border-radius: 6px;
  }

  .status-media.grouped-images > :global(*) {
      padding-bottom: 56.25%;
      width: 100%;
  }

  .status-media.grouped-images.two-cols > :global(*) {
      padding-bottom: calc(112.5% + 5px);
  }

  .status-media.grouped-images.odd-cols > :global(:first-child) {
      grid-row-end: span 2;
      padding-bottom: calc(112.5% + 5px);
      background-color: blue;
  }

  .status-media.status-media-is-sensitive {
    margin: 0;
  }
</style>
<script>
  import Media from './Media.html'

  export default {
    computed: {
      nCols:
        ({ mediaAttachments, $groupedImages }) => {
          return ($groupedImages && mediaAttachments.length > 1) ? 2 : 1
        },
      oddCols:
        ({ mediaAttachments }) => {
          return (mediaAttachments.length > 1 && (mediaAttachments.length % 2))
        },

      twoCols:
        ({ mediaAttachments }) => {
          return (mediaAttachments.length === 2)
        }
    },
    components: {
      Media
    }
  }
</script>