Ohne Medienabfragen: Erreichen eines flüssigen 3-Spalten-Desktop-Layouts zu einem 1-Spalten-Mobillayout

Traditionelle Medienabfragen spielen eine entscheidende Rolle bei der Anpassung Website-Layouts für verschiedene Bildschirmgrößen. Um jedoch ein wirklich flüssiges und ansprechendes Design zu erstellen, besteht der Wunsch, alternative Lösungen zu erkunden, die Medienabfragen überflüssig machen.

Stellen Sie sich eine Website mit einem 3-Spalten-Layout auf Desktops vor:

   |  |  |
---| ---| ---|
| 1 | 2 | 3 |

Auf Mobilgeräten sollte sich das Layout jedoch in eine einzelne Spalte umwandeln:

|
---|
| 1 |
| 2 |
| 3 |

Um dies dynamisch zu erreichen, kommen die leistungsstarken Funktionen von CSS zur Rettung:

Grid and Clamp

.grid-wrapper {
   display: grid;
   gap: 15px;
   grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}

Die Funktion „repeat()“ erstellt eine bestimmte Anzahl von Spalten und „clamp()“ stellt sicher, dass mindestens eine Spalte vorhanden ist, wenn das Ansichtsfenster unter 500 Pixel verkleinert wird.

Flexbox und negativer Rand

.flex-container {
   display: flex;
   flex-direction: row;
}

.flex-item {
   width: 33%; /* initial width */
   margin-right: -15px; /* negative margin to facilitate overlapping */
   background-color: red;
}

/* Breakpoint rule for smaller screens */
@media screen and (max-width: 500px) {
   .flex-item {
      margin-right: 0; /* remove negative margin on mobile */
   }
}

Dieser Ansatz stellt sicher, dass Elemente auf größeren Bildschirmen nebeneinander ausgerichtet werden, auf schmaleren jedoch vertikal gestapelt werden. Der negative Rand erzeugt zunächst eine Überlappung, die durch Entfernen auf kleineren Bildschirmen korrigiert wird.

Fazit

Durch die Nutzung von Raster, Klemme, Flexbox und negativen Rändern ist dies möglich um flüssige Layouts zu erstellen, die sich nahtlos zwischen mehreren Spalten und einer einzelnen Spalte anpassen, sodass keine Medienabfragen für grundlegende Layoutänderungen erforderlich sind.