Wie füllt man die letzte Zeile im CSS-Raster?

Die letzte Zeile im responsiven CSS-Raster füllen

Michael Dobler

Autor Dr. Web

22. September 2026

2 Min. Lesezeit

Ein CSS-Raster aus Karten verteilt seine Spalten je nach Bildschirmbreite neu, und genau daran scheitert oft die Optik: Bei sieben Karten in einem Vierer-Raster bleibt unten eine Zeile mit drei Löchern. Trennlinien zwischen den Zellen enden dann mitten im Leeren. Tim Wilson hat für dieses Alltagsproblem eine Lösung dokumentiert, die ohne experimentelle Browser-Features auskommt.^[1]

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Seit Chrome und Edge 149 zeichnet der Browser diese Linien selbst, mit den neuen Eigenschaften row-rule und column-rule. Wilsons Kniff bleibt trotzdem gefragt, denn zwei große Engines ziehen noch nicht mit.

Das Wichtigste in Kürze

Das Problem: Ein responsives Raster füllt seine letzte Zeile selten komplett, und rahmenbildende Trennlinien laufen dann ins Leere.
Der Trick: Wilson erzeugt die Rahmen über einen 1 Pixel breiten Rasterabstand und ergänzt fehlende Füllzellen per Formel.
Der Nachfolger: Chrome und Edge 149 zeichnen die Linien mit row-rule und column-rule direkt in die Rasterlücken, ganz ohne Füllzellen.
Der Haken: Firefox und Safari unterstützen die Eigenschaften noch nicht, ein Polyfill steckt in Arbeit.

Warum bleibt die letzte Rasterzeile ein Problem?

Ein weißes Rasterregal vor grauem Grund, ein Lineal und dekorative Schreibwaren — Responsives Raster verteilt Spalten dynamisch, füllt Schlusszeile selten vollständig. Trennlinien enden dadurch mitten im Nichts

Ein responsives Raster verteilt seine Spalten dynamisch, füllt die Schlusszeile aber nur selten vollständig, und jede über die Lücken gezogene Trennlinie endet dadurch mitten im Nichts.

Wilson zieht die Rahmen nicht um jede Karte einzeln. Sein Kniff über die Fugen gibt dem Raster einen Abstand von einem Pixel, legt darunter die Rahmenfarbe und färbt die Karten weiß. So scheint die Grundfarbe nur in den Fugen durch und bildet ein sauberes Gitter.

Bei einer unvollständigen Schlusszeile bricht dieses Gitter jedoch auf. Wilson besetzt die freien Plätze deshalb mit leeren Füllzellen und berechnet ihre Zahl aus Karten- und Spaltenzahl. Das Raster schließt wieder als Rechteck, und die Linien reichen bis zum Rand.

Was ändern row-rule und column-rule?

Die CSS Gap Decorations ziehen Trennlinien nativ in die Abstände von Grid und Flexbox: column-rule wirkt jetzt auch außerhalb des Mehrspalten-Layouts, row-rule kommt als Gegenstück für die waagerechten Fugen neu hinzu.

Chrome und Edge liefern die Eigenschaften seit Version 149 aus, veröffentlicht am 15. Mai 2026.^[2] Dazu kommen Feineinstellungen wie rule-color, rule-style und rule-width sowie rule-inset und rule-break.

Der Mechanismus erledigt genau das, wofür Wilson bisher Füllzellen braucht. Eine Eigenschaft namens rule-visibility-items steuert sogar, ob an einer leeren Stelle überhaupt eine Linie erscheint. Der Umweg über Hintergrundfarbe und unsichtbare Zellen entfällt vollständig.

Trennlinien im CSS-Raster: Bastellösung gegen nativen Standard

Warum die letzte Rasterzeile Ärger macht und was die Lücke künftig schließt

149

Chrome und Edge ziehen ab dieser Version die Fugen-Linien selbst

Engines fehlen noch: Firefox und Safari kennen die Eigenschaften nicht

1 px

schmaler Rasterabstand, aus dem der ältere Trick seine Rahmen baut

Der Trick (heute überall)

Rahmen entstehen aus einem 1 Pixel breiten Rasterabstand plus Hintergrundfarbe
leere Füllzellen ergänzen die unvollständige Schlusszeile
ihre Anzahl folgt aus einer Formel über Karten- und Spaltenzahl
funktioniert in jedem aktuellen Browser

Nativ (Chrome und Edge 149)

row-rule und column-rule zeichnen Linien direkt in Grid und Flexbox
rule-color, rule-style und rule-width steuern das Aussehen
rule-inset und rule-break regeln Abstand und Kreuzungen
keine Füllzellen und kein Hintergrund-Kniff mehr nötig

row-rule ist keine Spielerei für Designverliebte, sondern die erste native Antwort auf ein Layoutproblem, das Entwickler seit Jahren mit Bastellösungen umschiffen.
— Markus Seyfferth, Chefredakteur Dr. Web

Was heißt das für die DACH-Praxis?

Agenturen und Freelancer kombinieren vorerst beides: die native Linie in Chrome und Edge, den bewährten Trick als Rückfall für Firefox und Safari, die row-rule und column-rule noch nicht unterstützen.

Firefox und Safari zeichnen die Fugen-Linien bislang nicht, ein Polyfill steckt laut Chrome-Team noch in der Entwicklung.^[2] Ein Abfrageblock mit @supports trennt beide Welten sauber: Browser mit Unterstützung bekommen die schlanke native Variante, alle anderen die Füllzellen-Lösung.

Für Teams im DACH-Raum lohnt der Blick jetzt, nicht erst zum vollständigen Browser-Konsens. Das Muster wiederholt sich: Erst kürzlich brachte CSS text-fit die Schriftskalierung ohne JavaScript, und die vier Schalter für saubere Ziffern zeigen, wie viel Handarbeit moderne CSS-Eigenschaften ersetzen. Selbst Detailarbeit wie die optische Ausrichtung wandert Stück für Stück in den Browser.

Wilsons Beitrag bleibt die bessere Anleitung für den Rückfall, das native row-rule ist das Ziel. Testen Sie die Eigenschaft gerne an einem unkritischen Kartenraster, sichern Sie den Rest über @supports ab, und Sie ersetzen so ein Stück JavaScript durch reines CSS.