Photo demo

Switch layouts:

Number items:

main { 
  display: block;
  columns: 12rem; 
  column-gap: 1rem;
}

main { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  grid-template-rows: auto; 
  gap: 1rem;
}

main { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  grid-template-rows: masonry;
  gap: 1rem;
}

main { 
  display: grid;
  grid-template-columns: 14ch repeat(auto-fill, minmax(28ch, 1fr)) 14ch;
  grid-template-rows: masonry; 
  gap: 1rem;
}

main { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(14rem, 2fr)) minmax(8rem, 1fr);
  grid-template-rows: masonry; 
  gap: 1rem;
}

main { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16ch, 1fr));
  grid-template-rows: masonry; 
  gap: 1rem;
}
.card:nth-child(5n) { grid-column: span 2; }

main { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18ch, 1fr));
  grid-template-rows: masonry;
}
figure:has(.wide) { grid-column: span 2; }

main { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  grid-template-rows: masonry;
}
.expanded {  grid-column: span 4; }

/* plus code for View Transitions, requires Safari Technology Preview 192+ */

main { 
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 3fr 5fr 8fr;
  grid-template-rows: masonry; 
  gap: 1rem;
}

main { 
  display: grid;
  grid-template-columns: masonry;
  grid-template-rows: repeat(7, 150px); 
  gap: 1rem;
  overflow: scroll;
}

main { 
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
}
figure { flex: auto; }
img { height: 200px; width: auto; min-width: 100%; object-fit: cover; }