Responsive design

[Matthias Scharwies]

Servus!

Hallo Matthias,

mein Problem im Ausgangsbeitrag war, wie ordne ich die untereinander stehenden Blöcke den linken und rechten Spalten zu.

Du hast drei Absätze. Damit nicht deine ganze Seite drei Spalten kriegt, packe ich ein wrapper drum:

<div class="wrapper">
  <p>1. Absatz</p>

  <p>2. Absatz</p>

  <p>3. Absatz</p>
</div>

Die sind im Lesefluss untereinander, wie in einem Buch.

Jetzt kommt das CSS ins Spiel; z.B. das im 1. Beispiel erwähnte Grid:

	.wrapper {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto 1fr min-content;
	}

(Ich lass die media querie mal weg. Die brauchst du aber!)

Jetzt sind die drei Absätze automatisch nebeneinander

| 1. Absatz | 2. Absatz | 3. Absatz |

Da musst/willst du nix zuordnen; der erste Absatz kommt links, der zweite in der Mitte, der dritte rechts.

Auch bei columns verteilt der Browser die Absätze automatisch.

Bitte lies die verlinkten Tutorials.

Herzliche Grüße
Matthias Scharwies