Die immer lesenswerte Sarah Soueidan erklärt, wie man mit Grid responsive Layouts ohne Media Queries erstellen kann.
Hier der Link zum Artikel:
Mein Lieblingszitat findet sich gegen Ende:
I have yet to think of a use case where
Sara Soueidon – Summaryauto-fillwould make more sense thanauto-fit.
Hallo Herr Müller,
das repeat+auto-fit+minmax stellen Sie auch in Ihrem Buch vor, aber es kommt mir fast „zu schön, um wahr zu sein“ vor. Komplett auf media queries verzichten können, toll wäre das schon, aber klappt das immer?
Kann es sein, dass der Haken darin besteht, dass es einfache Layouts mit gleich großen Spalten sein sollten, damit es bei allen Viewports immer gut responsiv ist mit repeat+auto-fit+minmax? Denn alle Beispiele, die ich dazu sehe, sind immer mit Bildergalerien oder „Cards“. So auch in Ihrem Buch.
Was ist bei einem typischen „Artikel-Layout“, z.B. so:
grid-template-areas:
„header header header“
„nav1 nav1 nav1“
„nav-vert article sidebar“
„footer footer footer“;
grid-template-columns: 1fr 2fr 1fr;
Empfiehlt es sich da auch noch, um auf MW verzichten zu können?
Grüße,
Martin Dierks
Hallo Herr Dierks,
die Sache mit repeat(), auto-fit und minimax() ist wie Sie richtig sagen in erster Linie für Layouts mit sich wiederholenden, gleich breiten Spalten, und daher sind die Beispiele auch meist kleinere Module oder Abschnitte wie Bildergalerien oder Cards.
Bei dem von Ihnen beschriebenen typischen Artikel-Layout ist es in den meisten Fällen wahrscheinlich sinnvoller, mit Media Queries zu arbeiten. In »Einstieg in HTML und CSS« ist das z. B. das Layout für die News-Seite (K 24.5).
Ich würde das aber nicht als „Haken“ sehen. Das sind einfach verschiedene Layout-Werkzeuge für verschiedene Layout-Anforderungen.
Die eigentliche Frage ist vielleicht eher, wie sinnvoll der klassische Aufbau mit »nav-vert article sidebar« im Zeitalter von Mobile First wirklich noch ist. Der Trend im Webdesign geht ja eindeutig zur Einteilung des Inhaltsbereiches in untereinander stehende Abschnitte, die sich über die gesamte Breite der Seite erstrecken und die jeder für sich unterschiedliche, mehrspaltige Layouts enthalten.
Hallo Herr Müller,
danke für die Antwort.
Schade, aber ich dachte es mir schon fast. Den Link sehe ich mir mal näher an.
Ich werde mal das Basislayout mit auto-fit und minimax erstellen (desktop first) und schauen, wie gut die autom. Umbrüche funktionieren und wie das Layout auf den wichtigsten Viewportgrößen aussieht. Mit einem schlauen minmax geht das vielleicht recht gut. Dann im 2. Schritt würde ich das vermutlich eine oder andere nötige MQ ergänzen (die horizontale Navi wird MQ wohl unvermeidlich machen).
Ist eine solche Kombi sinnvoll? Irgendwie würde ich schon gerne diese geniale Technik des auto-fit und minimax nutzen, zumindest soweit es geht.
„Die eigentliche Frage ist vielleicht eher, wie sinnvoll der klassische Aufbau mit »nav-vert article sidebar« im Zeitalter von Mobile First wirklich noch ist.“
Das ist für das desktop-first-Basislayout so gedacht, für Smartphones wird es natürlich untereinander sein. Die Site existiert schon und ist auch schon responsive, ich will sie aber weggehend von WordPress+Theme zu einer statischen HTML-Site machen. Und so wie sie bereits existiert, wurde sie eben desktop-first gemacht, siehe http://www.freieseelen.de (gibt noch andere, vom Layout praktisch identische Sites).
Schreibe einen Kommentar