In der heutigen Unterrichtsstunde haben wir uns mit CSS beschäftigt und sind auf die Frage gestoßen, wie man Elemente nebeneinander positioniert. Da ich bisher immer mit Bootstrap gearbeitet habe, war mir es gar nicht bewusst, dass die Breite eines Div-Containers gar nicht ändert, ob er unter oder neben dem nächsten Container gezeigt wird – per default sind die Elemente immer untereinander.
Mit ein wenig Recherche auf W3Schools und selfhtml habe ich folgende Unterscheidungen gefunden:
- Die Css-Eigenschaft „float“: wird verwendet, um Elemente relativ zu anderen zu positionieren – am ehesten für Text-Bild Kombinationen
- Flexbox-Design: wird verwendet, wenn man die gesamte Seite entweder in Spalten oder Zeilen unterteilen will
- Grid-Design: wird verwendet, wenn man die gesamte Seite in Spalten und Zeilen aufteilen will.
Der Nachteil von float ist, dass float nicht immer responsiv ist – ich verliere also eher mal mein gutes Aussehen bei anderen Bildschirmgrößen – und dass es eben nur ein oder zwei Elemente zueinander positioniert, aber nicht ein klares Layout der gesamten Seite anbietet. Dafür ist es am einfachsten zu verstehen. Ich kann den float-Wert auf right, left, none oder inherit setzen, also ist zB. der Text rechts oder links neben dem Bild oder es gibt keinen Textumlauf (Dann steht trotzdem eine Zeile Text neben dem Bild, in Office wäre das die Eigenschaft „als Zeichen“!) Inherit bedeutet, dass der Float-Wert der Elternelements geerbt wird. Man kann eine Box „über“ eine andere legen, wenn die erste links oder rechtsbündig ist und die zweite keine Angabe hat – will man das nicht, nutzt man die Eigenschaft „clear“. (Float-Artikel auf w3schools)
Flexbox und Griddesign legen Eigenschaften für das gesamte Body-Element fest. Die gesamte Seite wird dann (bei Flex) ein Container, dessen Ausrichtung (Fließrichtung) man mit dem Befehl „direktion“ beeinflusst. (Selfthtml-Artikel zu Flex-Containern und Artikel zur CSS-Eigenschaft Flex). Flexbox behält ein Layout nicht ganz so gut bei flexiblen viewports – was auf dem einen Display nach 2 Boxen nebeneinander aussieht, kann auf dem nächsten Display drei Boxen nebeneinander oder mehr sein. Aber Flexbox ist leicht umzusetzen.
Bei Grid – also auch bei Bootstrap, das ist ein Gridlayout – wird die Seite komplett in ein Raster unterteilt. (Sehr verständlicher Überblick zu Rasterbegriffen) Man stellt das Display auf „grid“ und kann die Breite der Spalten definieren: Entweder absolut oder mit der Einheit fr (Also Bruchteil), em oder vh – oder man wählt den Wert „auto“. (1em ist in etwa die Breite des jeweils angezeigten Buchstaben M, vh steht für viewport und referenziert prozentual auf die gesamte Breite der Seite/ des druckbaren Bereichs.)
body {display:grid;
grid-template-columns: 1fr 2fr 1fr ;
}
In dem obigen Beispiel werden 3 Spalten erzeugt, die mittlere ist doppelt so groß wie die beiden äußeren. Prozentangaben wie bei „width“ gehen nicht. Auch die Höhe der Zeilen kann man vorher festlegen, mit grid-template-rows. Das macht Sinn, wenn man etwa eine feste Höhe für Header und Footer will. Bei einer Wiederholung derselben Größe nutzt man eine „repeat“-Anweisung, zB grid-template-columns:repeat(4, 1fr);
Für die einzelnen Elemente legt man hinterher mit den Befehlen grid-column und grid-row fest, über welche der Rasterzellen sie sich erstrecken sollen. Die Anleitung dazu ist auf Deutsch verständlicher, finde ich.
Man kann noch verschiedene Variationen vornehmen, um das Design noch reponsiver zu machen, etwa mit auto-fill, aber für unser Projekt genügt das erstmal.