Responsive design
bearbeitet von
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:
~~~ HTML
<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:
~~~ CSS
.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.
Bitte lies die verlinkten Tutorials.
Herzliche Grüße
Matthias Scharwies
--
[bildung.social/@selfhtml](https://bildung.social/@selfhtml)
Responsive design
bearbeitet von
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:
~~~ HTML
<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:
~~~ CSS
.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 willst du nix zuordnen; der erste Absatz kommt links, der zwiete in der mitte, der dritte rechts.
Bitte lies die verlinkten Tutorials.
Herzliche Grüße
Matthias Scharwies
--
[bildung.social/@selfhtml](https://bildung.social/@selfhtml)