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. :-)
Besuche uns ebenfalls auf https://divi-tutorials.com, wo du all unsere Tutorials rund um WordPress und dem Divi Theme finden kannst.

Unseren Stream findest du auf https://twitch.tv/nextab_de, indem wir dir 4 Tage die Woche mehr rund um die Themen Webdesign und Webentwicklung beibringen.
Eine sich gegenseitig helfende Community findest du auf https://divi-tutorials.com/discord und Facebook https://www.facebook.com/groups/divitutorials.

----------
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!
https://www.youtube.com/watch?v=OfIrBdWhFIg

Divi-Theme: BILD PERFEKT neben einem Text-Modul auf der HÄLFTE der Breite AUSRICHTEN
https://www.youtube.com/watch?v=ahbDKh_OxUo

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

Unser Code:
https://gist.github.com/9452963c3be70ddac478aa2d663def38

A Complete Guide to CSS Grid:
https://css-tricks.com/snippets/css/complete-guide-grid/

----------

Das Divi Theme*: https://divi-tutorials.com/divi_y
Die Divi Cloud*: https://divi-tutorials.com/divi_cloud
Unser Webhost*: https://divi-tutorials.com/all-inkl_y
Konto für Selbständige*: https://divi-tutorials.com/kontist_y
Unser Tipp für E-Mail-Marketing*: https://divi-tutorials.com/activecampaign_y

----------------
Die Musik im Clip stammt von Andrew Applepie, einem Berliner Künstler, den ihr hier unterstützen könnt: https://www.patreon.com/andrewapplepie/

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.

Видео Genialer CSS Trick: Elemente mit grid umbrechen lassen und verbergen, OHNE Media Queries канала nexTab.de