Layout

Celestia nutzt ein 12-Spalten-Grid mit Tailwind CSS.

Grid-System

<!-- 12-Spalten-Grid -->
<div class="grid grid-cols-12 gap-6">
  <div class="col-span-12 md:col-span-6 lg:col-span-4">
    <!-- Content -->
  </div>
</div>

Breakpoints

Tailwind Breakpoints:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px

Responsive Patterns

Stacking

<div class="flex flex-col md:flex-row gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Sidebar

<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
  <aside class="hidden lg:block">Sidebar</aside>
  <main class="col-span-3">Content</main>
</div>

Card Grid

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Cards -->
</div>

Spacing

Nutzt Token-basierte Spacing-Werte:

<div class="p-4 gap-6"><!-- Tokens statt Arbitrary --></div>

---

Grid ist konfiguriert – nutzt Tailwind-Klassen konsistent.