CSS grid para galerías de fotos

CSS grid es una de esas joyas CSS que si no usábamos, deberíamos. Aquí dejo algunos ejemplos de CSS Grid para galerías de fotos, pero se pueden utilizar para cualquier cosa al maquetar un sitio web.

Ejemplos

Estilo 1

Estilo 2

Estilo 3

Estilo 4

/* Definición general del grid, 4 columnas. */
   .grid {
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap:.5rem;
      background: #fdfdfd;
   }
   .grid a { height:5rem; overflow:hidden; }
   .grid img { width:120%; }
   /* grid1 */
   .grid1 a { height:5rem; }
   .grid1 a:first-child {
      grid-column-start: span 3;
      grid-row-start: span 3;
      height:17rem;
   }
   /* grid2 */
   .grid2 a:nth-child(2) {
      grid-column-start: span 2;
      grid-row-start: span 2;
      height:10.5rem;
   }
   /* grid3 */
   .grid3 a:nth-child(3) {
      grid-column-start: span 2;
      grid-row-start: span 3;
      height:16rem;
   }
   .grid3 a:nth-child(3) img { max-width:200%; }
      

p u b l i c i d a d

en el recuadro gris debería aparecer una publicidad, pero aún si no fuese así, se debe desplazar con el scroll, durante el área contenedora -- publicidad sticky.