Grid

Quick Reference

Schnellreferenz: Die wichtigsten Klassen für den täglichen Gebrauch.

Zweck	Klassen	Beispiel
Grid Container	`.grid`	`<div class="grid">`
Spalten definieren	`.grid-cols-{1,2,3,4,6,8,12,16,18,24}`	`.grid-cols-3`
Responsive Spalten	`.grid-{sm,md,lg,xl,2xl,3xl,4xl}-cols-{1,2,3,4,6,8,12,16,18,24}`	`.grid-md-cols-4`
Spalten überspannen	`.col-span-{1-24}`	`.col-span-2`
Responsive Spans	`.col-{sm,md,lg,xl,2xl,3xl,4xl}-span-{1-24}`	`.col-lg-span-6`
Abstände	`.gap-{0-5}`	`.gap-4`
Grid Platzierung	`.col-start-{1-24}, .col-end-{1-25}`	`.col-start-2 .col-end-6`
Responsive Placement	`.col-{sm,md,lg,xl,2xl,3xl,4xl}-start-{1-24}`	`.col-md-start-3`
Alignment	`.items-{start,center,end,stretch}, .self-{start,center,end,stretch}`	`.items-center`

Best Practices

Empfohlen

Verwende das 12-Spalten System für Standard-Layouts
Nutze das 24-Spalten System für komplexe Designs
Beginne mobile-first mit .grid-cols-*
Verwende mathematisch sinnvolle Teiler
Teste responsive Verhalten auf verschiedenen Geräten
Kombiniere mit Bootstrap Order-Klassen

Vermeiden

Mische nicht Grid und Bootstrap .row/.col
Verwende keine Custom CSS für Grid-Layouts
Überlade nicht mit zu vielen Breakpoints
Vergiss nicht die Gap-Abstände
Verwende keine ungeraden Spalten-Zahlen
Vermeide zu komplexe Verschachtelungen

Grid Basics

Unser Grid System basiert auf CSS Grid und bietet mathematisch optimierte Spalten-Layouts.

Verfügbare Klassen

Klasse	Spalten	Verwendung	Teiler von 24
`.grid-cols-{1,2,3,4,6,8,12,16,18,24}`	Variable	Basis Grid Container	✓
`.gap-{0-5}`	-	Abstände zwischen Items	-

Grundlegende Grid Container

1

2

3

<div class="grid grid-cols-3 gap-4">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>

Gap (Abstände)

gap-2

gap-4

<div class="grid grid-cols-4 gap-2">...</div>
    <div class="grid grid-cols-4 gap-4">...</div>

Responsive System

Das Grid System unterstützt alle Bootstrap Breakpoints plus erweiterte Breakpoints bis 4XL.

Verfügbare Klassen

Breakpoint	Klassen Format	Mindestbreite	Beispiel
Extra Small	`.grid-cols-{1,2,3,4,6,8,12,16,18,24}`	0px	`.grid-cols-3`
Small	`.grid-sm-cols-{1,2,3,4,6,8,12,16,18,24}`	576px	`.grid-sm-cols-4`
Medium	`.grid-md-cols-{1,2,3,4,6,8,12,16,18,24}`	768px	`.grid-md-cols-6`
Large	`.grid-lg-cols-{1,2,3,4,6,8,12,16,18,24}`	992px	`.grid-lg-cols-8`
Extra Large	`.grid-xl-cols-{1,2,3,4,6,8,12,16,18,24}`	1200px	`.grid-xl-cols-12`
2X Large	`.grid-2xl-cols-{1,2,3,4,6,8,12,16,18,24}`	1600px	`.grid-2xl-cols-16`
3X Large	`.grid-3xl-cols-{1,2,3,4,6,8,12,16,18,24}`	1900px	`.grid-3xl-cols-18`
4X Large	`.grid-4xl-cols-{1,2,3,4,6,8,12,16,18,24}`	2400px	`.grid-4xl-cols-24`

Extrembeispiel: 24-Spalten über alle Breakpoints

Zeigt die volle Flexibilität des Systems - von 1 Spalte bis 24 Spalten:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<div class="grid grid-cols-1 grid-sm-cols-2 grid-md-cols-4 grid-lg-cols-6 grid-xl-cols-8 grid-2xl-cols-12 grid-3xl-cols-16 grid-4xl-cols-24 gap-1">
      <div>Item 1</div>
      <div>Item 2</div>
      <!-- bis Item 24 -->
    </div>

Standard Responsive Beispiel

Responsive 1

Responsive 2

Responsive 3

Responsive 4

<div class="grid grid-cols-1 grid-md-cols-2 grid-lg-cols-4 gap-4">
      <div>Responsive 1</div>
      <div>Responsive 2</div>
      <div>Responsive 3</div>
      <div>Responsive 4</div>
    </div>

Column & Row Spanning

Verwende Spanning-Utilities um Grid-Items über mehrere Spalten oder Reihen zu strecken.

Verfügbare Klassen

Typ	Basis Klassen	Responsive Klassen	Beispiel
Column Spans	`.col-span-{1-24}`	`.col-{sm,md,lg,xl,2xl,3xl,4xl}-span-{1-24}`	`.col-md-span-6`
Row Spans	`.row-span-{1,2,3,4,6}`	`.row-{sm,md,lg,xl,2xl,3xl,4xl}-span-{1,2,3,4,6}`	`.row-lg-span-2`

Column Spanning Beispiel

col-span-2

col-span-3

1

col-span-4

col-span-2

<div class="grid grid-cols-6 gap-4">
      <div class="col-span-2">col-span-2</div>
      <div class="col-span-3">col-span-3</div>
      <div class="col-span-1">1</div>
      <div class="col-span-4">col-span-4</div>
      <div class="col-span-2">col-span-2</div>
    </div>

24-Spalten System - Präzise Layouts

1/8

33.33%

50%

16.67%

<!-- 8-teilige Aufteilung (nur mit 24 möglich) -->
    <div class="grid grid-cols-24 gap-3">
      <div class="col-span-3">1/8</div>
      <div class="col-span-3">1/8</div>
      <!-- etc. -->
    </div>
    
    <!-- Asymmetrische Layouts -->
    <div class="grid grid-cols-24 gap-3">
      <div class="col-span-8">33.33%</div>
      <div class="col-span-12">50%</div>
      <div class="col-span-4">16.67%</div>
    </div>

Grid Placement

Positioniere Grid-Items präzise mit Start- und End-Utilities.

Verfügbare Klassen

Typ	Basis Klassen	Responsive Klassen	Beispiel
Column Start	`.col-start-{1-24}`	`.col-{sm,md,lg,xl,2xl,3xl,4xl}-start-{1-24}`	`.col-lg-start-3`
Column End	`.col-end-{1-25}`	`.col-{sm,md,lg,xl,2xl,3xl,4xl}-end-{1-25}`	`.col-md-end-8`
Row Start	`.row-start-{1-4}`	`.row-{sm,md,lg,xl,2xl,3xl,4xl}-start-{1-4}`	`.row-lg-start-2`
Row End	`.row-end-{2,3,4,6,7}`	`.row-{sm,md,lg,xl,2xl,3xl,4xl}-end-{2,3,4,6,7}`	`.row-xl-end-4`

Column Start/End Beispiel

Start 2, End 6

Start 8, End 12

<div class="grid grid-cols-12 gap-3">
      <div class="col-start-2 col-end-6">Start 2, End 6</div>
      <div class="col-start-8 col-end-12">Start 8, End 12</div>
    </div>

Alignment

Steuere die Ausrichtung von Grid-Items und Grid-Containern.

Verfügbare Klassen

Typ	Klassen	Wirkung
Container Items (horizontal)	`.justify-items-{start,center,end,stretch}`	Alle Items im Container
Container Items (vertikal)	`.items-{start,center,end,stretch}`	Alle Items im Container
Einzelnes Item (horizontal)	`.justify-self-{start,center,end,stretch}`	Nur das jeweilige Item
Einzelnes Item (vertikal)	`.self-{start,center,end,stretch}`	Nur das jeweilige Item

Grid Container Alignment

Items Center

<div class="grid grid-cols-3 gap-4 items-center">
      <div>Items Center</div>
      <div>Items Center</div>
      <div>Items Center</div>
    </div>

Individual Item Alignment (align-self)

self-start

self-center

self-end

<div class="grid grid-cols-3 gap-4">
      <div class="self-start">self-start</div>
      <div class="self-center">self-center</div>
      <div class="self-end">self-end</div>
    </div>

Individual Item Alignment (justify-self)

justify-self-start

justify-self-center

justify-self-end

<div class="grid grid-cols-3 gap-4">
      <div class="justify-self-start">justify-self-start</div>
      <div class="justify-self-center">justify-self-center</div>
      <div class="justify-self-end">justify-self-end</div>
    </div>

Praktische Beispiele

Card Layout

Card 1

Beispielinhalt für die erste Card.

Mehr erfahren

Card 2

Beispielinhalt für die zweite Card mit etwas mehr Text um unterschiedliche Höhen zu demonstrieren.

Mehr erfahren

Card 3

Beispielinhalt für die dritte Card.

Mehr erfahren

<div class="grid grid-cols-1 grid-md-cols-2 grid-lg-cols-3 gap-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">Beispielinhalt...</p>
          <a href="#" class="btn-outline-pink">Mehr erfahren</a>
        </div>
      </div>
      <!-- Weitere Cards -->
    </div>

Dashboard Layout

Header - col-span-12

Sidebar - col-span-3

Main Content - col-span-6

Widget - col-span-3

Footer - col-span-12

<div class="grid grid-cols-12 gap-4">
      <div class="col-span-12">Header</div>
      <div class="col-span-3">Sidebar</div>
      <div class="col-span-6">Main Content</div>
      <div class="col-span-3">Widget</div>
      <div class="col-span-12">Footer</div>
    </div>

Bootstrap Kombination

Das Grid System arbeitet nahtlos mit vorhandenen Bootstrap Utilities zusammen.

Verfügbare Bootstrap Utilities

Feature	Bootstrap Klassen	Verwendung mit Grid	Beispiel
Element Reihenfolge	`.order-{0-5,first,last}`	Funktioniert direkt mit Grid-Items	`.order-2, .order-first`
Responsive Order	`.order-{sm,md,lg,xl,xxl}-{0-5,first,last}`	Breakpoint-spezifische Reihenfolge	`.order-md-2, .order-lg-first`
Spacing	`.m-{0-5}, .p-{0-5}, .mx-auto, .py-{0-5}`	Zusätzliche Abstände zu Grid Gap	`.p-3, .mx-auto`
Display	`.d-{none,block,flex}, .d-{sm,md,lg,xl,xxl}-{none,block,flex}`	Responsive Sichtbarkeit von Grid-Items	`.d-none, .d-md-block`
Flexbox Utils	`.d-flex, .align-items-{start,center,end}, .justify-content-{start,center,end,between,around}`	Für Inhalte innerhalb von Grid-Items	`.d-flex, .justify-content-center`

Order Beispiel

Desktop: 1., Mobile: 2.

Desktop: 2., Mobile: 3.

Desktop: 3., Mobile: 1. (Wichtigster Content)

<div class="grid grid-cols-1 grid-md-cols-3 gap-4">
      <div class="order-2 order-md-1">Desktop: 1., Mobile: 2.</div>
      <div class="order-3 order-md-2">Desktop: 2., Mobile: 3.</div>
      <div class="order-1 order-md-3">Desktop: 3., Mobile: 1.</div>
    </div>

Weitere Bootstrap Utilities: Alle Bootstrap Utilities funktionieren problemlos mit Grid-Items. Vollständige Bootstrap Utilities Referenz →

Quick Reference - Bootstrap + Grid

Zweck	Grid Klassen	Bootstrap Utilities	Kombination
Responsive Layout	`.grid, .grid-md-cols-3`	`.d-none, .d-md-block`	Grid + Sichtbarkeit
Mobile-First Order	`.col-span-6`	`.order-first`	Spanning + Reihenfolge
Spacing	`.gap-4`	`.p-3, .m-2`	Grid Gap + Bootstrap Spacing