1. Start
  2. Webdesign
  3. Grid

Grid

Grids sind Satzspiegel für das Web die sich repetieren. Es handelt sich hierbei um eine Art dynamisches Gestaltungsraster welches sich auf die jeweiligen Screengrößen von Ausgabegeräten anpasst bzw. herunterbricht. Grids helfen in einem Team Design-Konventionen anzuwenden um die gestalterischen Konsistenz einer Website aufrechterhalten zu können.
Das Gestaltungsraster von koenigsstuhl.com leitet sich vom Bootstrap-CSS-Grid ab und stellt sich wie folgt dar:
  Extra small (xs) < 576px Small (sm) >= 576px Medium (md) >= 768px Large (lg) >= 992px Extra large (xl) >= 1200px Extra extra large (xxl) >= 1400px
Max. Containerbreite None (auto) 540px 720px 960px 1140px  
Präfix der CSS-Klasse .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Anzahl der Spalten 12 12 12 12 12 12
Breite des Spaltenzwischenraum 1. 5rem - 24px 1. 5rem - 24px 1. 5rem - 24px 1. 5rem - 24px 1. 5rem - 24px 1. 5rem - 24px
Verschachtelbar Ja Ja Ja Ja Ja Ja
Spalten anordenbar Ja Ja Ja Ja Ja Ja

3 Inhaltselemente 2, 3 und 4 Column Container

default - Ansicht Medium und kleiner - jede Spalte wird zur Zeile (Breite 100%)

2 Column Container
default - Ansicht größer Medium - jede Spalte bekommt 50%
Column 1

viewport > md  - Breite = 50% (entspricht 6 Grid Spalten),  Abstand zur Seite = 1.5rem (entspricht 24px)

viewport < md  - Breite = 100% (entspricht 12 Grid Spalten), Abstand nach unten = 1rem (entspricht 16px)

Column 2

viewport > md  - Breite = 50% (entspricht 6 Grid Spalten),  Abstand = 1.5rem (entspricht 24px)

viewport < md  - Breite = 100% (entspricht 12 Grid Spalten), Abstand unten = 1rem (entspricht 16px)

3 Column Container
default - Ansicht größer Medium - jede Spalte bekommt 33,33%
Column 1

Ansicht größer Medium - Breite = 33,33% (entspricht 6 Grid Spalten)

Ansicht Kleiner gleich Medium - Breite = 100% (entspricht 12 Grid Spalten)

Column 2

Ansicht größer Medium - Breite = 33,33% (entspricht 6 Grid Spalten)

Ansicht Kleiner gleich Medium - Breite = 100% (entspricht 12 Grid Spalten)

Column 3

Ansicht größer Medium - Breite = 33,33% (entspricht 6 Grid Spalten)

Ansicht Kleiner gleich Medium - Breite = 100% (entspricht 12 Grid Spalten)

4 Column Container
default - Ansicht größer Medium - jede Spalte bekommt 25%
Column 1

Ansicht größer Medium - Breite = 25% (entspricht 6 Grid Spalten)

Ansicht Kleiner gleich Medium - Breite = 100% (entspricht 12 Grid Spalten)

Column 2

Ansicht größer Medium - Breite = 25% (entspricht 6 Grid Spalten)

Ansicht Kleiner gleich Medium - Breite = 100% (entspricht 12 Grid Spalten)

Column 3

Ansicht größer Medium - Breite = 25% (entspricht 6 Grid Spalten)

Ansicht Kleiner gleich Medium - Breite = 100% (entspricht 12 Grid Spalten)

Column 4

Ansicht größer Medium - Breite = 25% (entspricht 6 Grid Spalten)

Ansicht Kleiner gleich Medium - Breite = 100% (entspricht 12 Grid Spalten)

Erweitert - 100% Medium, 50% Desktop, 25% Large

1 Column Medium - 2 Column Desktop - 4 Column Large
Box - Border Default

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Box - Border Default

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Box - Border Default

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Box - Border Default

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam