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.

Grid-Items manuell platzieren: 2. Mit benannten Bereichen

Grid-Items manuell platzieren: 2. Mit benannten Bereichen

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

Gratismonat starten Für Ihr Team erwerben

Grid-Items manuell platzieren: 2. Mit benannten Bereichen

“

Statt der nummerierten Grid-Linien können Sie zur Platzierung von Grid-Items auch benannte Grid-Bereiche mit aussagekräftigen Namen benutzen. Auf Englisch heißen die named grid areas. Und als Beispiel zum Kennenlernen dieser benannten Grid-Bereiche, möchte ich hier den Inhaltsbereich auf der News-Seite gestalten. Der ist momentan noch komplett einspaltig, und das soll sich ändern. Der soll am Ende so aussehen, das Intro geht über beide Spalten, und darunter sollen im Verhältnis 2:1 links die Beiträge stehen, und rechts die Link-Listen. Das ist Ziel der Übung, und zunächst einmal muss man natürlich das HTML kennen, denn ohne das zu kennen, kann man mit CSS nicht gestalten Es gibt main class "site-content". Oben sehen Sie, body hat die Klasseseite News, und inside Content gibt es wie immer das div class "inside." und da gibt es ein section "content-intro", ein section mit den Beiträgen, und eine site mit der Klasse "LinkListen". Das ist das HTML. Als Grid-Container eignet sich…

Inhalt