Skip to main content

Flexbox dürfte uns allen mittlerweile bekannt sein und hat schon vielen Entwickler:innen die eine oder andere ruhigere Nacht bereitet. Doch was wäre, wenn du dein Flexbox Layout nicht nur vertikal, sondern auch horizontal erweitern könntest? Das und mehr ist möglich seit der Integration von CSS Grid.

Stell dir vor, es gäbe eine Möglichkeit, deine Website in einem 2-dimensionalen Raster frei gestalten zu können. Etwa wodurch du Textblöcke erstellen kannst, die Bilder teils überlagern. Oder sogar komplexere Bildergalerien ohne Negativ-Margin oder Positionierung. Oder mit Hilfe von CSS schnell Seitentemplates gestalten kannst, die zudem noch responsiv sind. Für all dies gibt es eine Lösung: CSS Grid.

Was ist CSS Grid?

Ähnlich wie Flexbox wird auch CSS Grid mit Hilfe eines Container Elements und CSS Grid Items integriert. So finden wir zum Beispiel auch einige Eigenschaften zur Positionierung der Flexbox wieder: zum Beispiel align-items, justify items, justify self und align-self. Diese helfen dir dabei, die Inhalte deines Grids entsprechend zu positionieren.

Grob gesagt ist CSS Grid eine Flexbox, die 2-dimensional funktioniert:

Wie das Grid System mit Bootstrap funktioniert

Während wir mit Flexbox lediglich Reihen und entsprechende Columns horizontal bauen können, gibt uns CSS Grid die Möglichkeit auch vertikal anzuordnen:

CSS Grid ist

Weiterlesen auf raidboxes.io webdesign-development

Sie haben eine Frage, wünschen sich ein Erstgespräch oder haben bereits ein konkretes Projekt im Kopf?

Lassen Sie uns drüber reden! Gerne erläutern wir Ihnen in einem persönlichen Gespräch, was wir genau für Sie tun und in welchen Bereichen wir Sie unterstützen können. Rufen Sie uns einfach an oder schreiben Sie uns. Wir freuen uns auf Sie!

Nehmen Sie jetzt Kontakt mit uns, der PW DESIGN Werbeagentur aus Göttingen auf und sichern Sie sich die richtigen Ideen!

Quelle: https://raidboxes.io/blog/webdesign-development/css-grid-layout/

Close Menu

Kontakt

E:  info@pwdesign.de
T: +49 551 30971380

→ Termin Buchen

Wir bitten Sie um Verständnis, dass wir Termine nur nach vorheriger Vereinbarung wahrnehmen können.

Adresse

Werner-von-Siemens-Str. 1
37077 Göttingen

→ Adresse in Google Maps anzeigen

Werbeagentur aus Göttingen

PW DESIGN ist ein Göttinger Webdesign Unternehmen spezialisiert in Responsive Webdesign mit WordPress, Suchmaschinenoptimierung (SEO), Online Marketing & Corporate- und Grafikdesign.