Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Solution: Die Kontaktseite per Grid gestalten

Solution: Die Kontaktseite per Grid gestalten

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Solution: Die Kontaktseite per Grid gestalten

“

(Musik) So, hier eine beispielhafte Lösung für die Aufgabe Kontaktformular und Kontaktdatenabschnitt nebeneinander zu platzieren. Los geht es hier mit dem Grid hier oben. Ich mache das Schema mal sichtbar. Da sieht man schon auf den ersten Blick hier unter dem Quelltext. Das ist dasselbe Prinzip, wie auf der New Seite. Ich habe nur etwas andere Bereichsnamen genommen Kontaktformular, Kontaktdaten, und dann diese Grid-Items mit der Eigenschaft Grid-Area in den entsprechenden Bereichen platziert. Das war Aufgabe Nummer 1. Aufgabe Nummer 2 betrifft das Kontaktformular. Das sollte so gestaltet werden. Auch hier schalte ich das Grid einmal ein. Hier sind keine benannten Bereiche, hier sind nur Grid-Linien. Das grid selbst ist definiert mit display: grid natürlich. Und im grid-template-columns, die erste Spalte hat eine feste Breite von 7 rem, und die zweite Spalte ist flexibel mit 1fr, die kriegt also quasi den Rest. Zwischenraum gap 1rem. Und dann geht es weiter. Die Beschriftung soll…

Inhalt