Grid

Ein Grid ist ein Element, um schnell und einfach ein Raster zu erstellen. Moderne Webseiten haben z.B. oft dieses klassische Kachel-Layout:

grid kachel layout

Dabei besteht das Element aus einzelnen Zellen, ähnlich wie eine Tabelle in Excel.

Wann Spalten, wann Grid?

Wenn du eine gerade Anzahl an Spalten brauchst, also z.B. ein 2x1 Raster, dann machst du das am besten über die Element-Einstellungen der Sektion:

sektion anzahl spalten bestimmen

Hier mehr dazu.

Wenn du aber eine ungerade Anzahl an Spalten, ein mehrzeiliges Raster oder Spalten bzw. ein Raster innerhalb einer Spalte haben möchtest, solltest du das Grid-Element verwenden.

Grid hinzufügen

grid hinzufuegen

Danach kannst du wie gewohnt verschiedene Elemente per Drag & Drop reinziehen.

Raster bestimmen

grid raster bestimmen

Dabei ist ein Raster von maximal 12x12 möglich, inklusive der verschiedenen Kombinationsmöglichkeiten.

Außerdem kannst du für die verschiedenen Endgeräte (Desktop, Tablet, Mobile) ein eigenes Raster bestimmen:

grid raster responsive

Hier mehr zu Responsive Design.

Zellenabstand ändern

Eine Zelle versucht immer so breit zu sein, wie sie kann. Verhindert tut das der Innenabstand zwischen den Zellen. Du änderst also einfach den Abstand dazwischen:

grid zellenabstand aendern

Dabei wird automatisch der Spaltenabstand und der Zeilenabstand verändert. Du kannst aber auch diese Verbindung trennen und den Spaltenabstand bzw. Zeilenabstand einzeln ändern:

grid spaltenabstand zeilenabstand

Außerdem ist eine Zelle immer so hoch wie die anderen Zellen. Dadurch ist immer alles automatisch bündig (z.B. bei Kacheln mit mal viel, mal wenig Elementen):

grid automatisch so hoch wie alle anderen

Zellen vertauschen

Vertausche eine einzelne Zelle einfach per Drag & Drop:

grid zellen vertauschen drag and drop

Alternativ kannst du das auch über die Element-Einstellungen machen:

grid zellen vertauschen element einstellungen

Brandneu

Neue Layout-Elemente

Chimpify

Plattform

Powered by Chimpify