Fragen zur grid-Anwendung
bearbeitet von Matthias ScharwiesServus!
> Hallo zusammen,
> nachdem ich zufällig im Forum darauf gestoßen bin, dass man mit grid relativ schnell responsive Seiten erstellen kann, habe ich begonnen, mich einzulesen und herumzuprobieren.
> Jetzt habe ich erste Fragen.
> Wie bekomme ich ein Bild, dann einen Text und dann noch ein Bild in den Header, wobei der aus mehreren Worten bestehende Text einzeilig bleiben sollte, soweit Platz vorhanden ist.
Du hast als Breite der Rasterfelder auto eingestellt.
In der Referenz findesT du die seite für grid-Template-columns:
* [CSS/Eigenschaften/grid-template-columns](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/grid-template-columns)
Dort findest Du für den Wert auto folgende Beschreibung: `auto`, "*die sich am minimalen Bedarf des vorhandenen Inhalts ausrichtet*"
Setze entweder `auto 1fr auto` oder, wenn Du weißt, wie groß Deine Grafiken sind, deren Breite: `100px 1 fr 100px`
> Das Ganze sollte im Header horizontal und vertical zentriert sein.
> Mein Versuch:
> CSS:
> header {
>
> ~~~
> display: grid;
> grid-template-columns: auto auto auto;
> grid-column-gap: 1.5em;
> }
>
> ~~~
> index.html:
>
> ~~~
> <header>
> <img src="/fotos/bild1.GIF" alt="...." />
> <h1>Das ist ein Test</h1>
> <img src="/fotos/bild2.GIF" alt="...." />
>
> </header>
> ~~~
>
> Ergebnis:
> .................................................................................................................
>
> [![](/images/64c93948-6954-11eb-8b3f-b42e9947ef30.jpg?size=medium)](/images/64c93948-6954-11eb-8b3f-b42e9947ef30.jpg)
> .................................................................................................................
> Die punkt. Linien sollen die Breite des angezeigten Header darstellen.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“