Ich habe noch gelernt, dass man die float-Eigenschaft benutzen kann, um HTML-Elemente nebeneinander zu bekommen. Float ist aber immer etwas tricky. Es gibt mit Flexbox und Grid bessere, moderene Lösungen und heute setze ich mich mit Grid auseinander. Dazu nutze ich folgenden Guide.
Ein Grid ist ein Container, in dem man Zeilen und Spalten definiert. Anders als bei einer Tabelle können Elemente auf diesem Grid (also zu deutsch Raster) aber freier positioniert werden.
Man definiert zunächst ein Element, also zum Beispiel ein div, dass als CSS-Eigenschaft (üblicherweise über eine Klasse zugewiesen) die Eigenschaft „display:grid“ hat. Außerdem difiniert man über grid-template-columms bzw. grid-template-rows im CSS dieses Elements, wie viele Reihen und Spalten das Raster haben soll. Dabei trägt man die jeweilige Breite bzw. Höhe direkt ein. Ein Div mit einem 4×4-Grid mit gleichmäßig breiten und hohen Rasterflächen würde man also so erzeugen:
<style>
div.container {display:grid;
grid-template-rows: 1fr 1fr 1fr 1fr ;
grid-template-columms: 1fr 1fr 1fr 1fr ;
}
</style>Das „fr“ steht für „fraction“ und meint, dass eine (gleichmäßig große) Einheit des verfügbaren Platzes genutzt wird. Man kann auch feste Pixelgrößen oder den Befehl „auto“ nutzen. Jedes Leerzeichen zwischen den Bezeichnern meint eine Linie des Rasters.
Ein Item, also ein anderes Element wie ein Bild, eine Textbox usw. wird dann platziert, indem man folgende CSS-Eigenschaften angibt:
.item-a {
grid-column-start: 1;
grid-column-end: three;
grid-row-start: row2-start;
grid-row-end: 3;
}Die Zahlen (1, three, 3) referieren hierbei auf die durchnummerierten Rasterlinien (!), nicht auf die Felder dazwischen. Man kann hier auch den Befehl span nutzen, z.B. span 2 spannt über zwei Felder auf. Gibt man kein Ende an, nutzt man automatisch span 1. Ganz fancy wird es, wenn man Bereiche benannt hat, aber das ist mir jetzt noch zu komplex.
Elemente können sich überlappen, die Anordnung in der Höhe macht man mit z-index.