Responsive design

[Siegfried M.]

Moin,

Ich habe jetzt einfach mehrere zusammengehörige Texte untereinander geschrieben. Im Augenblick umrahmt durch <p> und </p>.

Durch was soll ich das p-tag ersetzen?

Am Smartphone kommt jetzt alles schön untereinander.

Nun sollen aber bei breiterem Display zwei Spalten entstehen mit den Textblöcken 3 und 5 im linken und dem Rest im rechten Teil.

Wie kann ich dies erreichen?

Das Einzige, was ich weiß, dass hierzu media queries dienen.

Habt Ihr vielleicht ein einfaches Beispiel?

Nette Sonntagsgrüße

Siggi

[Matthias Scharwies]

Servus!

Ich habe jetzt einfach mehrere zusammengehörige Texte untereinander geschrieben. Im Augenblick umrahmt durch <p> und </p>.

Durch was soll ich das p-tag ersetzen?

Nicht ersetzen, sondern evtl. durch Gruppierungselemente wie div, article etc ergänzen.

Am Smartphone kommt jetzt alles schön untereinander.

Nun sollen aber bei breiterem Display zwei Spalten entstehen mit den Textblöcken 3 und 5 im linken und dem Rest im rechten Teil.

Wie kann ich dies erreichen?

Es gibt da mehrere Möglichkeiten:

1. Media Queries

Das Einzige, was ich weiß, dass hierzu media queries dienen.

Im Holy-Grail-Layout gibt es ab 45em Breite mehrere Spalten:

body {
	display: grid;
}

/* 3-spaltiges Layout für breitere Viewports */
@media (min-width: 45em) {
	body {
		grid-template-columns: 1fr 3fr 1fr;
		grid-template-rows: auto 1fr min-content;
	}
}

2. responsive_Raster_ohne_Media_Queries

Keine Zauberei, sondern nur eine flexible Festlegung der Rasterfelder:

main {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  color: black;
  font: 1em/1.3 Cambria, serif;
}

Das würde man eher bei Bildergalerien machen.

3. Spalten mit CSS

Typografie/Spalten#columns

.mehrspaltig {
  column-width: 12em;
  max-width: 40em; 
}

Unten sieht man, wie man Überschriften über mehrere Spalten verteilen kann.
Das sollte man aber nur in Ausnahmefällen tun.

Herzliche Grüße
Matthias Scharwies

[Siegfried M.]

Hallo Matthias,

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

Schönen Sruß

Siggi

[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