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