写真ギャラリー（マサリー風）のCSS Grid実装

<div class="grid-container">
  <div class="item-1">photo-1</div>
  <div class="item-2">photo-2</div>
  <div class="item-3">photo-3</div>
  <div class="item-4">photo-4</div>
  <div class="item-5">photo-5</div>
  <div class="item-6">photo-6</div>
  <div class="item-7">photo-7</div>
  <div class="item-8">photo-8</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  height: 500px;
}

.item-1 { grid-area: 1 / 1 / 3 / 3; }
.item-2 { grid-area: 1 / 3 / 2 / 4; }
.item-3 { grid-area: 1 / 4 / 2 / 5; }
.item-4 { grid-area: 2 / 3 / 3 / 5; }
.item-5 { grid-area: 3 / 1 / 5 / 2; }
.item-6 { grid-area: 3 / 2 / 5 / 4; }
.item-7 { grid-area: 3 / 4 / 4 / 5; }
.item-8 { grid-area: 4 / 4 / 5 / 5; }

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .grid-container > * {
    grid-area: auto;
  }
}