responsive_Raster_ohne_Media_Queries

[michaah]

Hi, ich bin dabei mich im wiki hier etwas "weiterzubilden" weil ich einen vorhandenen Webauftritt fit für mobile Geräte machen will. Dabei bin ich über die oben genannte Seite gestolpert.

Ich hatte erwartet, dass die dort dargestellten Beispiele auch brauchbar für kleine mobile Geräte (smartfons) wären. Dazu müßten sich jedoch die im Gritt definierten Spalten irgendwann zu einer Spalte zusammenschieben bzw untereinandern anordnen... zumindest meinem Verständnis von "responsive Design" nach. Vielleicht ist mein Verständnis falsch, aber es ging hier ja explizit darum notwendige Anpassungen ohne Media_Queries hinzubekommen. So wie das aber hier aussieht verschwindet auf mobilen Geräten ein Teil des Inhalts und seitliches scrollen wird nötig. Das ist ja genau das was eigentlich verhindert werden soll.

Vielleicht ist mein Grundverständnis unpassend. Der Titel hat bei mir den Eindruck erweckt es wäre möglich ein Grid so aufzubauen, dass es flexibel genug wäre um von einer Desktop Darstellung bis hin zu einer adäquaten Smartfon Darstellung ohne Media_Queries auszukomen. Verstehe ich etwas falsch oder wofür ist dieses Beispiel ein Beispiel?

[Matthias Scharwies]

Servus!

Ich hatte erwartet, dass die dort dargestellten Beispiele auch brauchbar für kleine mobile Geräte (smartfons) wären. Dazu müßten sich jedoch die im Gritt definierten Spalten irgendwann zu einer Spalte zusammenschieben bzw untereinandern anordnen... zumindest meinem Verständnis von "responsive Design" nach.

Du hast Recht. Problem ist der article, der über zwei Rasterelemente geht. Deshalb hat die Seite eine Minimalbreite von 40em.

Hier müsste man den Regelsatz in eine media queries setzen. Das mach ich übermorgen.

Alternativ könnte man dies notieren:

article {
  grid-column: 1 / -1;

}

Dann würde article eine ganze Reihe einnehmen, egal, wie viele Rasterfelder es gibt.

Herzliche Grüße

Matthias Scharwies

[michaah]

Hier müsste man den Regelsatz in eine media queries setzen. Das mach ich übermorgen.

Aha, ok, da bin ich gespannt, wie das konkret aussieht und funktioniert ... wenn auch mit M_Q.

Alternativ könnte man dies notieren:

article {
  grid-column: 1 / -1;

}

Dann würde article eine ganze Reihe einnehmen, egal, wie viele Rasterfelder es gibt.

Puh, ich glaube da muß ich noch an meinen Verständnis von den Rahmenbedingungen und Zwängen von "article" arbeiten um das zu durchblicken ...

Danke soweit. Ich habe also offenbar einen Bug gemeldet ;-)

[Matthias Scharwies]

Servus!

Danke soweit. Ich habe also offenbar einen Bug gemeldet ;-)

Vielen Dank für Deine Rückmeldung!

Ein Bug wäre es imho, wenn Grid Layout nicht richtig funktionieren würde. Hier hatte ich 2017 Blödsinn gemacht:

Puh, ich glaube da muß ich noch an meinen Verständnis von den Rahmenbedingungen und Zwängen von "article" arbeiten um das zu durchblicken

Nein, man darf das nur nie vergessen! article ist wie h1und p ein Blockelement. Ich wollte eine längere Erklärung schreiben, die war aber schon vorhanden:

• responsive_Raster_ohne_Media_Queries#Grundlagen

Ich hatte 2017 das flexible Grid Layout mit einer festen Angabe „zerschossen“:

article {
  grid-area: 2 / 1 / 4 / 3;
}

/* bedeutet: */

article {
  grid-column: 1 / 3;
  grid-row:    2 / 4;

}

Wenn sich article über zwei Rasterfelder mit je 20em erstreckt, hat der Body eine Breite von mind. 40em. 😟

Ich habe jetzt auf feste Breiten verzichtet. Mit

article {
  grid-column: 1 / -1;
  grid-row: span 2;
}

beginnt der Block an der ersten Rasterlinie und geht bis zur letzten (Negative Werte zählen von rechts.) Bei einer Spalte ist es dann nur eine, bei breiteren Viewports eben drei. Auch span 2 ist flexibler als eine feste Zuordnung zu einer bestimten Reihe.

Hier müsste man den Regelsatz in eine media queries setzen. Das mach ich übermorgen.

Da habe ich jetzt drauf verzichtet. Falls Du wirklich unterhalb von 20em arbeiten willst, würde das so gehen:

@media (min-width: 40em) {
  display: grid;
  grid-template-columns: repeat(auto-fill, 20em);
}

Das letzte Beispiel mit den quadratischen Tiles in einer Bilderwand wird gerade hier im Forum entwickelt und wird in den nächsten Tagen online gestellt.

Schau Dir mal besonders die ersten zwei Kapitel des Grid-Tutorials an:

• CSS/Tutorials/Grid
  • Einführung
  • Grid-Container

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@michaah

es ging hier ja explizit darum notwendige Anpassungen ohne Media_Queries hinzubekommen. So wie das aber hier aussieht verschwindet auf mobilen Geräten ein Teil des Inhalts und seitliches scrollen wird nötig. Das ist ja genau das was eigentlich verhindert werden soll.

Ja, grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)) erzeugt mindestens eine Spalte, die mindestens 20em breit ist. Bei Viewports schmaler als 20em muss horizontal gescrollt werden.

Man muss also per Media-Query dafür sorgen, dass diese Regel erst bei breiteren Viewports greift. Ganz ohne Media-Query geht’s doch (noch) nicht, AFAIK.

LLAP 🖖