photo gallery auto-fill span 3 columns 3 rows

<!doctype html>
<title>Example</title>
<style>
.grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 1px;
  align-items: start;
  justify-items: center;
  margin: auto;
  width: 504px;
  }
.grid img {
  max-width: 100%;
}
.grid img:nth-child(2) {
  grid-column: span 3;
  grid-row: span 3;
  }
</style>
<main class="grid">
  <img src="/pix/samples/22m.jpg" alt="Sample photo">
  <img src="/pix/samples/23l.jpg" alt="Sample photo">
  <img src="/pix/samples/24m.jpg" alt="Sample photo">
  <img src="/pix/samples/25m.jpg" alt="Sample photo">
  <img src="/pix/samples/15m.jpg" alt="Sample photo">
  <img src="/pix/samples/27m.jpg" alt="Sample photo">
  <img src="/pix/samples/28m.jpg" alt="Sample photo">
  <img src="/pix/samples/32m.jpg" alt="Sample photo">
  <img src="/pix/samples/26m.jpg" alt="Sample photo">
  <img src="/pix/samples/30m.jpg" alt="Sample photo">
  <img src="/pix/samples/16m.jpg" alt="Sample photo">
  <img src="/pix/samples/31m.jpg" alt="Sample photo">
</main>