Tag Acht

Home Links Glossar

Feedback zum Modul, SVG's und erste Layouts mit CSS Grid.

Unterrichtsdaten

Download

codingbasic_tag08.zip

Das SVG-Bildformat

SVG-Bilder sind Vektorgrafiken. Im Gegensatz zu anderen Bildformaten werden nicht Pixel, sondern Pfade abgespeichert. SVG-Bilder kannst Du animieren und über HTML/CSS manipulieren. Sie lassen sich mit CSS ohne Probleme in ihrer Größe verändern, ohne dass die Grafiken an den Rändern unscharf werden. Wie alle anderen Bildformate auch, lassen sich SVG-Dateien mit dem <img>-Befehl einsetzen.

Eine herausragende Eigenschaft von SVG-Bildern ist jedoch die Möglichkeit, das Bild direkt in den HTML-Code zu schreiben.

Um die SVG Datei nun effektiv auch mit CSS stylen zu können, sollten wir sie fürs Web optimieren. Konkret planen wir, unnötige Gruppierungen, Breiten- sowie Höhenangaben und jegliche Farbformate zu entfernen, so dass wir sie danach via CSS stylen und nach belieben verändern können.

SVG optimieren

So reduzieren wir die Dateigrösse auf ein Minimum und geben uns die Möglichkeit, diverse Werte mit CSS zu überschreiben.

            svg {
  fill: #A3E839;
  width: 10rem;
}
svg:hover {
  fill: #85DEFF;
}

Erste Layouts mit CSS Grid

Das CSS-Grid-Layoutmodul bietet ein rasterbasiertes Layoutsystem mit Zeilen und Spalten, das uns die Gestaltung von Webseiten ermöglicht, wie wir es aus dem Grafikdesign kennen.

Ein Grid Layout besteht grundsätzlich aus einem Container, in welchem sich mehrere Kinder-Elemente befinden.

Der Display-Wert «grid»

Ein HTML Element wird zu einem Grid-Container, wenn es den Display Wert grid besitzt.

            .container {
  display: grid;
}

Einem Grid-Container können mehrere Werte zugewiesen werden, mit welchem das Grid definiert wird. Am wichtigsten ist die Definition von Spalten und falls notwendig auch Zeilen.

Die CSS Unit «fr»

Die Breite von Spalten und Zeilen kann anhand von CSS Units definiert werden. Theoretisch wäre eine Angabe in rem, % und auto möglich. Üblicherweise definieren wir die Breiten jedoch mit einer neuen CSS Unit namens fr. Fr steht für Fraction und bedeuten einfach gesagt "Anteil der verbleibenden Breite". Eine Deklaration wie zum Beispiel "1fr 2fr" würde zum Beispiel eine ungefähre Darstellung von 33% und 66% bedeuten.

Die «grid-template-columns» Property

Die Eigenschaft grid-template-columns definiert die Anzahl der Spalten und effektive Breite in einem Grid-Layout. Der Wert ist eine durch Leerzeichen getrennte Liste bestimmt, in der jeder Wert die Breite der jeweiligen Spalte definiert.

            .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
/* Dieses Grid hat drei gleich grosse Spalten */
}

Die «grid-template-rows» Property

Die grid-template-rows Property definiert die Anzahl der Zeilen und deren Höhe.

            .container {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
/* In diesem Grid ist die mittlere der drei Reihen doppelt so gross */
}

Wichtig: Eine definierte Anzahl Zeilen ist jedoch nur zu empfehlen, wenn das geplante Layout nicht mit mehr Inhalten ergänzt wird. In vielen Layouts wird diese Property nicht verwendet.

Spalten im Grid

Spalten und Zeilen können mit einer Lücke versehen werden.

            .container {
  display: grid;
  column-gap: 1rem;
  row-gap: 1rem;
  /* bei gleichen Abständen kann Gap auch zusammengefasst werden */
  gap: 1rem;
}

Das Grid Layout verstehen

Ein Grid Layout ist relativ simpel aufgebaut und logisch beschriftet. Zwischen jeder Spalte und Zeile befindet sich eine Linie, die fortlaufend nummeriert ist (insofern du sie nicht selber beschriftet hast).

Die Nummerierung kannst du mit dem Browser-Inspektor bequem auslesen, indem du in der Elementansicht beim Grid-Container den «grid» Button auswählst.

Damit werden alle Grid Linien und deren Nummerierung sichtbar.

Platzierung von Inhalten in einem Grid

Ohne weitere Definitionen verhalten sich direkte Kinder-Elemente eines Grid Containers immer gleich. Jedes Element nimmt eine Zelle des Grids ein. Um einem Element mehr Platz einzuräumen, können wir die Anzahl einzunehmender Spalten und Zeilen mit folgenden CSS Properties definieren.

Die «grid-column» Property

Die Eigenschaft grid-column legt fest, in welcher(n) Spalte(n) ein Element platziert werden soll. Wir bestimmen dabei, in welcher Spalte das Element beginnen und enden soll.

            .childElement {
  grid-column-start: 1;
  grid-column-end: 3;
  /* Oder in vereinfachter Schreibweise */
  grid-column: 1 / 3;
}

Die «grid-row» Property

Mit der Eigenschaft grid-row können wir das oben beschriebene Platzierungsverhalten auf Zeilen anwenden.

            .childElement {
  grid-row: 1 / 3;
}

Grid Zusammenfassung

Diese ersten simplen Grid Eigenschaften ermöglichen uns relativ komplexe Layouts, anhand jenen wir eine Vielzahl von Design Anforderungen bereits gut abdecken.

HTML Struktur

Beispiel Layout

CSS Formatierungen

            .container {
    max-width: 60rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.childElement {
    min-height: 15rem;
    background: lightgreen;
    border: 0.4rem solid darkgreen;
}

.secondCard {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
}

.fourthCard {
    grid-column: 1 / 3;
}

Grid kann noch viel mehr

CSS Grid ist ein mächtiges Feature, mit welchem du noch viel mehr machen kannst als bisher gelernt wie zum Beispiel explizite Beschriftungen von Teilbereichen, genaue Platzierungen und Ausrichtungen. Eine komplette Übersicht aller Grid Features findest du nachfolgend.

CSS Grid Guide

Ausblick Coding Intermediate

Hier endet unser Coding Basic Kurs. Mit deinem aktuellen Wissensstand könntest du dich bereits problemlos an deine erste eigene Website machen. Nimm dir ein Projekt vor, gestalte dein eigenes Design und versuche getreu dem Motto «Übung macht den Meister» Wege zu finden, deine Website zu entwickeln.

Im Intermediate Kurs warten noch viele weitere Punkte auf uns, die du bei Interesse natürlich auch bereits selber recherchieren kannst. Wirf mal einen Blick in unsere Linksammlung, da findest du spannende Ressourcen zu ein paar der Themen, die uns noch erwarten:

Quellenangabe

w3schools.com