1. Zuhause
  2. Eigenschaften
  3. Webseitenelemente
  4. Gitterelement
  5. Gitterzellenlücke

So ändern Sie die Lücke für Rasterzellen

Sie können den Abstand zwischen den Rasterzellen entsprechend Ihren Anforderungen an das Webdesign ändern. Dazu können Sie die Cell Gap-Eigenschaft im Eigenschaftsfenster verwenden. Wählen Sie ein Gitter aus, gehen Sie dann zum Eigenschaftsfenster, scrollen Sie im Fenster nach unten und ziehen Sie den Schieberegler, um den Abstand zu ändern.
Mehr erfahren

Nach Funktionskategorien durchsuchen

Webseitenelemente
Unterstützte Systeme
Visueller Seiteneditor
Design-Elemente
Medienbibliotheken
Elementeigenschaften
Responsiv
Animationseffekte
Themen Einstellungen
Kontakt Formular
Kopfzeile Fußzeile
Blog
E-Commerce
SEO
Benutzerdefinierter Code
Anwendungsfunktionen
Site- und Seiteneigenschaften
WordPress-Widgets

Alles, was Sie brauchen, um Ihre kostenlose Website zu erstellen

Verwenden Sie unseren Website Builder, um Websites ohne Codierung zu entwerfen und zu erstellen. Ziehen Sie alles, was Sie möchten, per Drag & Drop an einen beliebigen Ort. Der Website Creator passt Ihre Website automatisch für Mobilgeräte an, um sie responsive zu machen. Wählen Sie aus mehr als 15,000 anpassbaren Website-Vorlagen.

Für Windows herunterladen Für Mac herunterladen

Verwandte Funktionen

Gitterzellen-Hintergrundtyp

Eine Zelle des Rasterelements kann einen Hintergrund haben, und Sie können dafür verschiedene Typen verwenden. Sie können die Farbfüllung, den Verlauf, das Bild, das Video anwenden oder überhaupt keinen Hintergrund haben. Wählen Sie eine Rasterzelle aus und gehen Sie zum Eigenschaftsfenster. Wählen Sie einen Hintergrundtyp, der am besten zu Ihrem Webdesign passt.
Grid in Reaktionsmodi

Die Rasterelemente sind sehr nützlich, um Reaktionsmodi zu erstellen, da sich die Rasterzellen in den kleineren Bildschirmen automatisch untereinander bewegen. Außerdem können Sie für viele Layouts die Rasterzellenreihenfolge in allen mobilen Ansichten ändern. Wählen Sie das Rasterelement, schalten Sie den Reaktionsmodus in der oberen Leiste um und passen Sie bei Bedarf Ihr Raster an. Bei den meisten Grids müssen Sie keine Anpassungen vornehmen.
Rasterzellen verschieben

Die Raster ermöglichen die Organisation verschiedener Inhalte, einschließlich Bilder, Symbole, Formen und Text in Form von Zellen, die sehr bequem zu bedienen sind. In unserem visuellen Editor können Sie ganz einfach Zellen in einem Raster verschieben, indem Sie einfach eine Zelle über eine andere ziehen und so Ihr Layout und Ihren Inhalt für Ihr Webdesign perfektionieren. Außerdem können Sie auf die Pfeilsymbole im Kontextwerkzeug der Zelle klicken, um die Zelle zu verschieben.
Raster für mobile Geräte
Raster für mobile Geräte

Verwenden Sie das Rasterelement, um die Reaktionsmodi einfach zu erstellen. Auf den kleineren Bildschirmen verschieben sich die Grid Cells automatisch untereinander.
Bewegen Sie den Schieberegler auf eine Rasterzelle

Die Slider-Animation ist eine sehr beliebte Reaktion auf Hover. Sie können verschiedene Effekte für Rasterzellen hinzufügen, z. B. Fade, Overlay, Slide, Flip, Wobble und Zoom. Wählen Sie eine Rasterzelle aus und gehen Sie dann zum Eigenschaftsfenster. Klicken Sie auf den Link Hover Slide und wählen Sie dann den Effekt aus, den Sie auf dem Hover der Rasterzelle sehen möchten.
Rasterlayout umkehren

Das Gitterelement ist sehr flexibel. Sie können das Layout an die Anforderungen Ihrer Webdesign-Idee anpassen. Um das Gitter umzudrehen, das Sie in einem Block platziert haben. Wählen Sie dieses Element aus und gehen Sie dann zum Eigenschaftsfenster auf der rechten Seite. Klicken Sie neben dem Rasterlayout auf die Dropdown-Liste Spiegeln. Klicken Sie auf Spiegeln oder Drehen, um den Vorgang auszuführen.
Größe von Rasterzellen ändern

Wenn Sie ausgefallene Layouts für Ihre Bilder, Formen und Texte erstellen müssen, können Sie die Größe von Rasterzellen mit verschiedenen Breiten ändern, um Ihren Designs ein modernes Aussehen zu verleihen.
Grid-Layout ändern

Sie können das Layout des hinzugefügten Rasters jederzeit in einen Block ändern. Wählen Sie das Rasterelement aus und gehen Sie dann zum Eigenschaftsfenster. Klicken Sie auf den Pfeil, um die Liste der Rastervoreinstellungen zu öffnen und wählen Sie das Layout aus, das besser zu Ihrer Webdesign-Idee passt. Sie können Rasterzellen auch im Editor hinzufügen und entfernen.
Über 80 Rasterlayouts
Über 80 Rasterlayouts

Holen Sie sich die größte Auswahl an Grid-Layouts für Ihr Webdesign. Die Grid-Elemente helfen Ihnen, Ihre Designs automatisch mobilfreundlich zu gestalten.
Gitterboxed und breit

Sie können die Breite des Rasters ganz einfach von Boxed auf Wide und umgekehrt ändern. Wählen Sie ein Raster aus und gehen Sie dann zum Eigenschaftsfenster. Suchen Sie das Boxed/Wide-Symbol neben den Werten für Breite und Höhe und ändern Sie das Gird-Layout, indem Sie auf dieses Symbol klicken.

Kostenlose Vorlagen mit Gitterelement

Beginnen Sie mit unseren besten Vorlagen, die sich für jedes Unternehmen eignen. Erstellen und passen Sie sie mit unserem leistungsstarken und kostenlosen Website-Builder ohne Code an. Alle Vorlagen sind mobilfreundlich und sehen auf jedem Gerät hervorragend aus.

How To Customize The Gap Between Grid Cells In The Grid Container

You can modify and alter many aspects of the used CSS Grid layout to make your web design unique and beautiful. Change the CSS Grid-gap property to create more space between Grid items during this customization process. Select the Grid you want to customize, go to the Property Panel, and under the Layout section, you will find the Cell Gap slider. Move the slider to determine what gap between both columns and rows you want to display. A gap between rows or columns is an important feature that sets the attention your Grid cells will receive from visitors. So make sure to place grid items gap the way that all data and elements of your CSS grid layout module would be perfectly visible and readable.

A gap between the rows or columns greatly affects the data and can align content, especially with the font size inside the CSS grid cells. See how both columns and rows will improve the overall view of the page and grid, no matter the number. Depending on the media query, the responsive layouts you build and the number of columns and space between rows and columns will affect your following properties after getting started. Make sure your Grid layout module Level 1 uses browser support to its advantage providing at least three columns, similar to the Flexbox grid columns.

No matter what number of columns your responsive layouts use and what gap size between columns you will choose, the content must be displayed to the users. Any gap between the columns must give visitors more space to explore rows and columns. Like Flexbox grid container Grid columns, the Grid you can create in our builder can vary the common space between the rows, use more than three columns if the browser support can sustain them, and manage the size between columns. The proper space between rows or columns plays an important role in the content demonstration.

Company
Product
Themes & Templates
Nicepage
Web Design