Website: A Flexible Grid

20. A Flexible Grid

Build the image gallery with a complex grid system.

Mentor Seraphina

Seraphina crosses her arms and looks at you with a satisfied smile.
“The best comes last. Now let’s make it beautiful.” She grabs a parchment and draws a grid on it. We’ll work with grid-template-areas. A layout that adapts – elegant, deliberate, and perfect for any screen size.”

Your task

We’re using grid-template-areas — a layout that adapts: elegant, well-thought-out, and perfect for every screen size. Define a smart, responsive grid structure where each item has its place and role.

At 992px, 768px, and 576px, the grid must rearrange, not just shrink. Create new compositions for each breakpoint — structures that make sense and feel natural. Think flexibly. Play with the arrangement. Let each version of the grid tell its own story.

Desktop

992 & 768px

Solve the task here in the console [–> Open in a new tab]

CSS

/* Gallery */

.gallery-container {
   display: grid;
   grid-template-areas:
      "img1 img1 img2 img3 img3"
      "img4 img5 img2 img3 img3"
      "img4 img6 img6 img7 img8"
   ;
   grid-gap: var(--spacing-small);
}

@media (width<992px) {
   .gallery-container {
      grid-template-areas:
         "img7 img8 img5"
         "img1 img1 img4"
         "img3 img3 img4"
         "img2 img6 img6"
      ;
   }
}

@media (width<768px) {
   .gallery-container {
      grid-template-areas:
         "img7 img8"
         "img4 img3"
         "img4 img5"
         "img1 img1"
         "img6 img2"
      ;
   }
}

@media (width<576px) {
   .gallery-container {
      grid-template-areas:
         "img1"
         "img5"
         "img8"
         "img4"
         "img4"
         "img3"
         "img2"
         "img6"
         "img7"
      ;
   }
}

.img-gallery {
   max-width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: var(--border-small);
   box-shadow: var(--shadow-light);
   cursor: pointer;
}

.img1 {
   grid-area: img1;
}

.img2 {
   grid-area: img2;
}

.img3 {
   grid-area: img3;
}

.img4 {
   grid-area: img4;
}

.img5 {
   grid-area: img5;
   border-radius: var(--border-small);
}

.img6 {
   grid-area: img6;
}

.img7 {
   grid-area: img7;
   align-items: center;
   justify-content: center;
   border-radius: var(--border-small);
}

.img7 button {
   border: none;
   background: none;
}

.img7 .material-icons-rounded {
   cursor: pointer;
   font-size: var(--font-size-large);
   transition: 0.3s;
}

.img7 .material-icons-rounded:hover {
   color: var(--green)
}

.img8 {
   grid-area: img8;
}