Abstände, Zentrierung, responsive
bearbeitet von
Hallo Walter,
> Wie erreiche ich bei breiten Bildschirmen, dass die beiden Texte nebeneinander stehen?
Wenn Du möchtest, dass zwei Elemente per Grid-Layout nebeneinander stehen, muss ihr Elterelement display:grid haben, nicht die Elemente selbst.
Damit das nur bei breiten Bildschirmen passiert, schließe diejenigen Regeln, die das Grid erstellen, in einne @media-Abfrag ein:
~~~css
@media (width > 50em) {
body {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
~~~
Das ist jetzt auf dein links/rechts-Beispiel gemünzt, in dem die "Links" und "Rechts" Elemente (die gerne gültiges HTML sein möchten, wie Gunnar schrieb) Kindelemente des Body sind.
Vielleicht hilft Dir unser Tutorial-Satz zu Grid weiter:
<https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid>
_Rolf_
--
sumpsi - posui - obstruxi
Abstände, Zentrierung, responsive
bearbeitet von
Hallo Walter,
> Wie erreiche ich bei breiten Bildschirmen, dass die beiden Texte nebeneinander stehen?
Wenn Du möchtest, dass zwei Elemente nebeneinander stehen, muss ihr Elterelement display:grid haben, nicht die Elemente selbst.
Damit das nur bei breiten Bildschirmen passiert, schließe diejenigen Regeln, die das Grid erstellen, in einne @media-Abfrag ein:
~~~css
@media (width > 50em) {
body {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
~~~
Das ist jetzt auf dein links/rechts-Beispiel gemünzt, in dem die "Links" und "Rechts" Elemente (die gerne gültiges HTML sein möchten, wie Gunnar schrieb) Kindelemente des Body sind.
Vielleicht hilft Dir unser Tutorial-Satz zu Grid weiter:
<https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid>
_Rolf_
--
sumpsi - posui - obstruxi
Abstände, Zentrierung, responsive
bearbeitet von
Hallo Walter,
> Wie erreiche ich bei breiten Bildschirmen, dass die beiden Texte nebeneinander stehen?
Wenn Du möchtest, dass zwei Elemente nebeneinander stehen, muss ihr Elterelement display:grid haben, nicht die Elemente selbst.
Vielleicht hilft Dir unser Tutorial-Satz zu Grid weiter:
<https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid>
_Rolf_
--
sumpsi - posui - obstruxi