Website: Gestalte die Galerie

20. Ein flexibles Grid

Baue die Bildergalerie mit einem komplexen Grid-System auf

Mentorin Seraphina

Seraphina verschränkt die Arme und mustert dich mit einem zufriedenen Lächeln. „Das Beste kommt zum Schluss. Jetzt machen wir es richtig schön.“

Sie nimmt ein Pergament und malt ein Raster darauf. „Wir arbeiten mit grid-template-areas. Ein Layout, das sich anpasst – elegant, durchdacht, für jede Bildschirmgröße perfekt.“

Deine Aufgaben

Wir arbeiten mit grid-template-areas. Ein Layout, das sich anpasst – elegant, durchdacht, für jede Bildschirmgröße perfekt.

Unter 992px, 768px und 576px soll das Grid anders aussehen als hier. Nicht einfach verkleinern, sondern neu anordnen. Strukturen schaffen, die Sinn ergeben. Denk flexibel, spiel mit der Komposition.

Desktop

992 & 768px

Löse die Aufgabe hier in der Konsole [–> im neuen Tab öffnen]

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;
}