responsive_Raster_ohne_Media_Queries

[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