Genialer CSS Trick: Elemente mit grid umbrechen lassen und verbergen, OHNE Media Queries

Du hast eine Anordnung von Elementen in einem Grid (ähnlich einer Tabelle) und möchtest dafür sorgen, dass immer nur 1 Zeile angezeigt wird. Sprich: Sobald ein Element in die nächste Zeile rutscht, soll es automatisch ausgeblendet / nicht mehr angezeigt werden.

Wie das mit Hilfe nur weniger Zeilen CSS Code mit einem grid-Design möglich ist, ganz OHNE Media Queries, erklären wir dir im heutigen Video. Dieser Trick hilft dir, wesentlich mehr aus deiner Webseite heraus zu holen bzw. ein flexiblerer Designer zu werden. :-)

----------
Timestamps:
----------

0:00 - Einleitung
0:28 - Der CSS Code im Schnelldurchlauf erklärt

Erklärung des Codes Schritt für Schritt:
2:42 - Overflow: hidden; - Versteckt Inhalte, die über die Maße des Elternelements hinausragen
2:56 - grid-auto-rows: 0px; - Alle automatisch erstellten Zeilen bekommen eine Höhe von 0px
3:18 - grid-template-rows: repeat(1, auto); - Eine Zeile mit der Höhe von auto erstellen (und wiederholen)

3:48 - Gut zu wissen #1: Die Gap ist bei dieser Vorgensweise egal
4:17 - Gut zu wissen #2: Funktioniert bei fast jeder Auflösung (nur eine zusätzliche Media Query für mobile Endgeräte)

----------
Videovorschläge:
----------

RESPONSIVE DESIGN: CSS Media Queries verstehen - Elemente mobile ausblenden in unter 5 Min!

Divi-Theme: BILD PERFEKT neben einem Text-Modul auf der HÄLFTE der Breite AUSRICHTEN

----------
Hilfreiche Links:
----------

Unser Code:

A Complete Guide to CSS Grid:

----------

----------------

Alle Links, die mit einem * vermerkt sind, sind Partner oder Affiliate-Links. Durch das Klicken dieser Links unterstützt du uns und ggfs. bekommen wir einen geringen Anteil, wenn du ein Produkt oder Dienstleistung kaufst. Bei dir fallen keine Extrakosten an.