Grid Component

Die Grid-Komponente bietet ein reaktionsfähiges Rasterlayoutsystem, das sich automatisch an unterschiedliche Bildschirmgrößen anpasst und sich somit perfekt zum Organisieren von Karten, Inhaltsblöcken oder anderen Elementen eignet.

Props

Prop	Type	Required	Default	Description
columns	number	No	2	Number of columns to display on larger screens

Features

• Responsives Design – Passt sich auf Mobilgeräten automatisch von mehrspaltig zu einspaltig an
• Flexible Columns - Supports 1-6 columns on larger screens
• Automatic Spacing - Consistent gaps between grid items
• Slot Content - Accepts any content as children
• Mobile-First - Single column on small screens, customizable on larger screens

Usage Examples

Two Column Grid (Default)

import Grid from "../../../../components/user-components/Grid.astro";
import { Card } from '@astrojs/starlight/components';

<Grid>
  <Card title="Feature One">
    Description of the first feature
  </Card>
  <Card title="Feature Two">
    Description of the second feature
  </Card>
</Grid>

Three Column Grid

import Grid from "../../../../components/user-components/Grid.astro";
import { Card } from '@astrojs/starlight/components';

<Grid columns={3}>
  <Card title="Getting Started">
    Quick start guide
  </Card>
  <Card title="Configuration">
    Setup and customization
  </Card>
  <Card title="Deployment">
    Publishing your site
  </Card>
</Grid>

Four Column Grid

import Grid from "../../../../components/user-components/Grid.astro";
import { Card } from '@astrojs/starlight/components';

<Grid columns={4}>
  <Card title="HTML">
    Semantic markup
  </Card>
  <Card title="CSS">
    Modern styling
  </Card>
  <Card title="JavaScript">
    Interactive features
  </Card>
  <Card title="Astro">
    Static site generation
  </Card>
</Grid>

Mixed Content Grid

import Grid from "../../../../components/user-components/Grid.astro";
import { Card, Badge } from '@astrojs/starlight/components';

<Grid columns={2}>
  <div>
    <h3>Documentation</h3>
    <p>Complete guides and API reference</p>
    <Badge text="Updated" variant="success" />
  </div>

  <Card title="Quick Links">
    - [Installation](/install)
    - [Configuration](/config)
    - [Examples](/examples)
  </Card>
</Grid>

Responsive Behavior

Die Grid-Komponente passt sich automatisch an unterschiedliche Bildschirmgrößen an:

• Mobile (< 768px) - Always displays single column regardless of columns prop
• Tablet & Desktop (≥ 768 Pixel) – Verwendet die angegebene Anzahl von Spalten

Column Options

Sie können eine beliebige Anzahl von Spalten angeben, gängige Konfigurationen sind jedoch:

• columns={1} – Einzelne Spalte (nützlich zum Überschreiben des Standardwerts)
• columns={2} - Two columns (default)
• columns={3} – Drei Spalten (ideal für Funktionslisten)
• columns={4} - Four columns (compact layouts)
• columns={5} – Fünf Spalten (für viele kleine Gegenstände)
• columns={6} - Six columns (maximum recommended)

Styling

Die Komponente verwendet benutzerdefinierte CSS-Eigenschaften für eine flexible Spaltenverwaltung:

• Verwendet CSS Grid für das Layout
• Automatic gap spacing (1rem)
• Responsive breakpoints
• Kompatibel mit dem Designsystem von Starlight

Best Practices

• Verwenden Sie für die meisten Inhaltslayouts 2–3 Spalten
• Stellen Sie für eine optimale visuelle Ausgewogenheit sicher, dass Rasterelemente ähnliche Inhaltslängen haben
• Test on mobile devices to ensure single-column layout works well
• Erwägen Sie die Verwendung weniger Spalten für inhaltsintensive Elemente
• Gruppieren Sie verwandte Elemente zur besseren Organisation innerhalb desselben Rasters