CSS-Beispiel 08.10.2020, 17:51 Uhr

Full-Bleed-Layout in einem CSS-Raster

Josh W. Comeau stellt auf seiner Seite eine elegante Lösung für ein kniffliges modernes Layout vor, inklusive CSS-Sourcecode und detaillierter Erklärung.
(Quelle: joshwcomeau.com)
Das Problem zeigt er anhand einer denkbar schlecht gestalteten Internetseite auf, die nun wirklich jeder kennt: Wikipedia. Hat man einen großen Monitor und lässt dem Browser diesen auch füllen, dann präsentiert jeder Wikipedia-Eintrag wirklich schier endlos lange Zeilen, die kaum noch lesbar sind, insbsondere wenn man einen 4K-Monitor benutzt. Nun, eine Lösung dafür hat wohl schon jeder Webentwickler ein- oder mehrmals angefertigt, doch Josh geht es um eine besonders elegante Lösung, die er in seinem Beitrag Schritt für Schritt vorstellt. Selbstverständlich nutzt die Erklärungsseite selbst auch sein CSS für die Anzeige von Text und Bildern. Dabei wird gleich deutlich, dass seine Lösung auch Ausnahmen erlaubt, um beispielsweise Bilder auf der gesamten (oder auch annähernd der gesamten) Breite des Bildschirms anzuzeigen und es passt sich automatisch an die gewählte Schriftart an. Dabei erklärt er seinen Code, so dass ihn auch CSS-Neulinge vertehen und anwenden können, aber sehen Sie selbst unter https://joshwcomeau.com/css/full-bleed/.


Das könnte Sie auch interessieren