Grid und Flexbox

In diesem Workshop zeigen wir Ihnen, wie Sie auf der einen Seite sowohl mithilfe von Gitter (Grids), als auch mit einem Flexbox-Layout mehrere Elemente auf einer Webseite anordnen können. Ein großer Vorteil der Flexbox ist die Trennung der gestalterischen Elemente vom HTML-Code. Sie können damit problemlos lineare Strukturen umsetzen, bei verschachtelten stoßen Sie allerdings an die Grenzen der Vorgehensweise. An dieser Stelle bieten die CSS-Grids eine flexible Alternative. In einem Beispiel bauen wir ein 8x8 Grid auf und positionieren auf diesem unterschiedlich große Bilder, um Ihnen die Vorgehensweise zu demonstrieren.

Bei der Flexbox kommen zwei wesentliche Elemente zum Einsatz: der Flexbox-Container sowie die enthaltenen Flex-Items. Dies sind die direkten Kinder, die sich innerhalb des Containers befinden. Die Aktivierung findet, wie auch bei den Grids, über die display-Eigenschaft des Containers statt. Für das Flexbox-Modell nutzen Sie den Wert flex:

.flex-container {

  display: flex; }