Warum CSS-Raster für Mauerwerkslayouts nicht ausreichen

Eine benutzerfreundliche Methode zur Implementierung von Mauerwerkslayouts ist seit langem in der Webentwickler-Community auf der Suche. Dank Pinterest und verwandten Designs war es schwierig, diese ästhetisch dynamischen Raster nur mit CSS zu erstellen. Das Chrome-Team ist der Ansicht, dass diese Strategie möglicherweise nicht die beste ist, trotz jüngster Empfehlungen, die die Hinzufügung von Mauerwerksfunktionen zur CSS-Grid-Layout-Spezifikation fordern. Hier sind einige Gründe, warum wir der Meinung sind, dass Mauerwerk über eine eigene Layouttechnik und einige potenzielle Vorteile für Entwickler verfügen sollte.

Das Argument gegen das Hinzufügen von Mauerwerk zum CSS-Raster

1. Leistungsbedenken

CSS-Raster- und Mauerwerkslayouts handhaben die Platzierung von Elementen auf grundlegend unterschiedliche Weise:

• CSS-Raster: Alle Elemente werden vor dem Layout platziert, sodass der Browser genaue Spurgrößen und Platzierungen berechnen kann.
• Mauerwerk: Elemente werden so platziert, wie sie angeordnet sind, was dynamische Berechnungen erfordert, die beim Mischen fester und intrinsischer Spurgrößen zu erheblichen Leistungsproblemen führen können.

Stellen Sie sich ein Raster mit gemischten Spurdefinitionen wie „grid-template-columns: 200px auto 200px“ vor. Bei Mauerwerk muss der Browser jedes Element in jeder möglichen Konfiguration vorab anordnen, was in großen Rastern zu einer exponentiellen Komplexität führt. Dies ist besonders problematisch, wenn erweiterte Funktionen wie Untergitter verwendet werden.

Um den Versand einer Layoutmethode mit solchen inhärenten Einschränkungen zu vermeiden, schlagen wir eine Lösung vor, die Mauerwerk vom CSS-Grid trennt.

2. Spezifikationskomplexität

Das Zusammenführen von Mauerwerk in die Rasterspezifikation führt zu Inkonsistenzen, die im Widerspruch zu den Grundprinzipien der Formatierungskontexte stehen:

• Ausrichtungseigenschaften: Grid unterstützt sechs Ausrichtungseigenschaften, aber Mauerwerk würde nur eine Teilmenge verwenden, wie z. B. Flexbox.
• Platzierungseigenschaften: Raster hat vier Platzierungseigenschaften (z. B. Raster-Spalten-Anfang), während Mauerwerk nur zwei benötigen würde.
• Spurgröße: Bestimmte Muster wie „grid-template-columns: repeat(auto-fill, max-content)“ sind in Mauerwerk sinnvoll, müssen aber im Raster ungültig bleiben.

Die Einführung dieser Diskrepanzen erhöht die kognitive Belastung für Entwickler, da sie sich merken müssen, welche Funktionen in welchem ​​Kontext funktionieren. Diese Fragmentierung könnte zu Verwirrung und Fehlern führen.

Der Vorschlag: Mauerwerk als eigenständige Planungsmethode

Anstatt Mauerwerk mit CSS Grid zu bündeln, empfehlen wir, es als eigenständige Layoutmethode mithilfe von display:maurry zu definieren. Dieser Ansatz bewahrt die Flexibilität, die Entwickler an Grids lieben, und vermeidet gleichzeitig die oben beschriebenen Fallstricke.

Beispiel

Klassisches Mauerwerkslayout

Ein einfaches Mauerwerkslayout mit gleich großen Säulen kann erreicht werden mit:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

Gemischte Spurgrößen

Für Layouts mit abwechselnd schmalen und breiten Spalten:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

Auto-Size-Spuren

Automatische Größenanpassung von Titeln basierend auf dem Inhalt zulassen:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
  gap: 1rem;
}

Spanning und Platzierung

Elemente so aktivieren, dass sie sich über mehrere Spuren erstrecken:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
  gap: 1rem;
}

Vorteile eines separaten Mauerwerkslayouts

Klarheit: Entwickler können Mauerwerk verwenden, ohne sich um die Nuancen der CSS-Grid-Kompatibilität Gedanken machen zu müssen.

Flexibilität: Alle rasterähnlichen Funktionen bleiben verfügbar, ohne dass neue Einschränkungen eingeführt werden.

Zukunftssicher: Eine spezielle Mauerwerksspezifikation sorgt für konsistentes Verhalten in allen Browsern und vermeidet unnötige Komplexität.

Das obige ist der detaillierte Inhalt vonWarum CSS-Raster für Mauerwerkslayouts nicht ausreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!