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**](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Einf%C3%BChrung#Holy-Grail-Layout) gibt es ab 45em Breite mehrere Spalten: ~~~ CSS 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](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries) Keine Zauberei, sondern nur eine [flexible Festlegung der Rasterfelder](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries#Responsives_Grid): ~~~ CSS 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](https://wiki.selfhtml.org/wiki/Typografie/Spalten#columns) ~~~ CSS .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 -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)

Servus! > 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? Es gibt da mehrere Möglichkeiten: # 1. Media Queries > > Das Einzige, was ich weiß, dass hierzu media queries dienen. > Im [**Holy-Grail-Layout**](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Einf%C3%BChrung#Holy-Grail-Layout) gibt es ab 45em Breite mehrere Spalten: ~~~ CSS 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](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries) Keine Zauberei, sondern nur eine [flexible Festlegung der Rasterfelder](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries#Responsives_Grid): ~~~ CSS 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](https://wiki.selfhtml.org/wiki/Typografie/Spalten#columns) ~~~ CSS .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 -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)

Servus! > 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? Es gibt da mehrere Möglichkeiten: # 1. Media Queries > > Das Einzige, was ich weiß, dass hierzu media queries dienen. > Im [**Holy-Grail-Layout**](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Einf%C3%BChrung#Holy-Grail-Layout) gibt es ab 45em Breite mehrere Spalten: ~~~ CSS 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](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries) Keine Zauberei, sondern nur eine [flexible Festlegung der Rasterfelder](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries#Responsives_Grid): ~~~ CSS main { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); color: black; font: 1em/1.3 Cambria, serif; } ~~~ # 3. Spalten mit CSS [Typografie/Spalten#columns](https://wiki.selfhtml.org/wiki/Typografie/Spalten#columns) ~~~ CSS .mehrspaltig { column-width: 12em; max-width: 40em; } ~~~ Herzliche Grüße Matthias Scharwies -- [bildung.social/@selfhtml](https://bildung.social/@selfhtml)