Website-Kacheln erstellen

Kacheln – oft auch Karten oder Cards genannt – sind rechteckige Inhaltsblöcke, die Bild, Überschrift, Text und einen Link zu einer klickbaren Einheit bündeln. Sie ordnen Startseiten, Blog-Übersichten und Leistungsseiten in ein sauberes Raster. Unten steht der fertige Code für ein Raster, das sich ohne Media Queries an jede Bildschirmbreite anpasst – dazu, wie Sie Bilder ohne Verzerrung einpassen und wie Sie dasselbe Ergebnis per Baukasten oder in WordPress ganz ohne Code erreichen.

Das Grundgerüst: ein responsives Raster mit CSS Grid

Der schnellste Weg zu einem sauberen Kachel-Raster ist heute CSS Grid – nicht mehr Bootstrap oder verschachtelte float-Layouts. Mit einer einzigen Zeile passt sich die Spaltenzahl automatisch an die Bildschirmbreite an, ganz ohne Media Queries:

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

Der Trick steckt in auto-fit kombiniert mit minmax(280px, 1fr): Jede Kachel ist mindestens 280 Pixel breit und teilt sich den restlichen Platz gleichmäßig (1fr). Passen drei Kacheln nebeneinander, zeigt der Browser drei Spalten; wird das Fenster schmaler, bricht das Raster von selbst auf zwei und schließlich eine Spalte um. gap sorgt für gleichmäßige Abstände – nutzen Sie dafür gap und nicht margin, sonst entstehen unschöne Ränder außen.

Das zugehörige HTML ist bewusst schlicht. Jede Kachel ist ein eigenständiger Inhalt, deshalb eignet sich <article>:

<div class="kacheln">
  <article class="kachel">
    <a href="/leistungen/webdesign/">
      <img src="/img/webdesign.jpg" alt="Skizze eines Webdesign-Entwurfs"
           loading="lazy" width="600" height="400">
      <h3>Webdesign</h3>
      <p>Individuelle Layouts, die auf jedem Gerät funktionieren.</p>
    </a>
  </article>
  <!-- weitere Kacheln nach gleichem Muster -->
</div>

Bilder sauber einpassen

Der häufigste Fehler bei Kacheln sind verzerrte oder unterschiedlich hohe Bilder. Fotos kommen selten alle im gleichen Seitenverhältnis. Die Lösung ist object-fit: cover zusammen mit einem festen aspect-ratio:

.kachel img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

aspect-ratio reserviert den Platz, bevor das Bild geladen ist – das verhindert das ruckartige Nachrücken des Layouts (Cumulative Layout Shift), das Google als negatives Nutzungssignal wertet. object-fit: cover beschneidet das Bild mittig auf das Zielformat, statt es zu stauchen. Beide Eigenschaften werden von allen aktuellen Browsern unterstützt.

Optik und Interaktion

Ein leichter Schatten und eine dezente Bewegung beim Überfahren machen Kacheln als anklickbare Elemente erkennbar:

.kachel {
  border-radius: 12px;
  overflow: hidden;               /* schneidet das Bild an den runden Ecken ab */
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kachel:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}

Wichtig für Bedienbarkeit und Barrierefreiheit: Machen Sie die gesamte Kachel klickbar, nicht nur die Überschrift. Am einfachsten umschließt ein Block-<a> den ganzen Inhalt (wie oben). Setzen Sie einen sichtbaren Fokusrahmen, damit die Kachel auch per Tastatur erkennbar angesteuert wird – über :focus-visible erscheint er nur bei Tastaturnutzung, nicht beim Mausklick:

.kachel a:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

Schreiben Sie außerdem für jedes Bild einen aussagekräftigen alt-Text – leere alt-Attribute machen die Kachel für Screenreader-Nutzer wertlos.

Flexbox als Alternative

Wenn Ihre letzte Reihe die Kacheln lieber ausfüllen soll, statt Lücken zu lassen, ist Flexbox eine Option:

.kacheln { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.kachel  { flex: 1 1 280px; }

flex: 1 1 280px bedeutet: wachsen erlaubt, schrumpfen erlaubt, Grundbreite 280 Pixel. Der Nebeneffekt: In der letzten Reihe können einzelne Kacheln ungleich breit werden. Wollen Sie ein streng gleichmäßiges Raster, bleiben Sie bei CSS Grid.

Pinterest-Stil: die Masonry-Frage

Das versetzte, „mauerwerkartige” Layout von Pinterest, bei dem Kacheln unterschiedlicher Höhe lückenlos ineinandergreifen, heißt Masonry. Echtes CSS-Masonry (grid-template-rows: masonry) ist noch nicht flächendeckend verfügbar und steht in vielen Browsern nur experimentell hinter einer Einstellung bereit. Bis dahin gibt es zwei stabile Wege:

• Für rein vertikal fließende Spalten genügt oft die CSS-Eigenschaft columns: .kacheln { columns: 280px; }. Damit ordnet der Browser die Kacheln spaltenweise an – gut für Bilder-Galerien, weniger geeignet, wenn die Lesereihenfolge zeilenweise sein soll.
• Für echtes Masonry mit definierter Reihenfolge nutzen Sie eine JavaScript-Bibliothek wie Masonry.js.

Für die meisten Info- und Leistungsseiten ist das gleichmäßige Grid-Raster ohnehin die ruhigere, besser lesbare Wahl.

Ohne Code: Baukasten und WordPress

Sie müssen Kacheln nicht selbst programmieren. Wer eine Seite ohne HTML-Kenntnisse aufsetzt – etwa nach der Anleitung Eigene Website kostenlos erstellen ohne Anmeldung – findet fertige Kachel-Elemente im jeweiligen Editor:

• WordPress mit dem Block-Editor (Gutenberg): Fügen Sie den Block „Spalten” ein und platzieren Sie in jeder Spalte einen „Cover”- oder „Media & Text”-Block. Für automatische Blog-Kacheln nutzen Sie den Block „Beitrags-Loop” (früher „Query Loop”).
• Elementor, Divi & Co.: Diese Page-Builder liefern fertige „Karten”- oder „Portfolio”-Widgets, bei denen Sie Bild, Titel und Link nur ausfüllen.
• Baukästen (Wix, Jimdo, IONOS, Strato): Suchen Sie im Element-Menü nach „Karten”, „Galerie” oder „Raster”.

Wenn Sie die Struktur lieber von Hand aufbauen und verstehen möchten, was im Hintergrund passiert, hilft die Einführung HTML-Website erstellen mit Notepad.

Typische Fehler und ihre Lösung

• Unterschiedlich hohe Kacheln: Mit CSS Grid werden Zeilen automatisch gleich hoch. Bei Flexbox erledigt das die Standardvorgabe align-items: stretch. Ungleiche Höhen entstehen meist durch feste Höhenangaben – diese lieber entfernen.
• Verzerrte Bilder: Immer object-fit: cover plus aspect-ratio setzen (siehe oben).
• Kacheln kleben auf dem Smartphone zu eng: Prüfen Sie, ob gap gesetzt ist und minmax einen sinnvollen Mindestwert hat – 280 bis 320 Pixel funktionieren zuverlässig.
• Nur die Überschrift ist klickbar: Den gesamten Inhalt in ein Block-<a> einschließen.
• Layout springt beim Laden: width/height oder aspect-ratio am Bild angeben und Bilder mit loading="lazy" erst bei Bedarf nachladen.

FAQ

Grid oder Flexbox – was ist besser für Kacheln? Für ein gleichmäßiges, mehrspaltiges Raster ist CSS Grid mit auto-fit und minmax() die erste Wahl, weil es die Umbrüche ohne Media Queries regelt. Flexbox eignet sich, wenn die letzte Reihe die verfügbare Breite ausfüllen soll.

Wie viele Spalten sind sinnvoll? Auf Desktops sind drei bis vier Spalten üblich, auf Tablets zwei, auf Smartphones eine. Wenn Sie den Mindestwert in minmax() (z. B. 280px) festlegen, ergibt sich die Spaltenzahl automatisch aus der Bildschirmbreite – Sie müssen sie nicht selbst zählen.

Schaden viele Bild-Kacheln der Ladezeit? Nur, wenn Sie große Originalbilder ausliefern. Skalieren Sie Fotos auf die tatsächliche Anzeigegröße, speichern Sie sie als WebP und nutzen Sie loading="lazy". Dann bleiben auch Seiten mit vielen Kacheln schnell.