Erweiterbare Abschnitte innerhalb eines CSS -Gitters

CSS Grid ist ein fantastisches Tool zum Erstellen von Responsive Layouts mit minimalem Code und beseitigt häufig die Notwendigkeit von Medienabfragen. Ich fühle mich wohl für verschiedene Layouts und priorisieren Sie sauberes HTML. Eine kürzlich durchgeführte UI -Herausforderung stellte jedoch ein einzigartiges Problem dar: Erweiterung einer Gitterzelle auf die volle Breite, wenn eine Schaltfläche geklickt wurde, während die ursprüngliche Gitterstruktur und Reaktionsfähigkeit beibehalten wurde.

Die Anforderung war, dass die erweiterte Zelle:

1. Erscheinen direkt unter der Auslöserzelle.
2. Nehmen Sie die volle Gitterbreite ein.

Die überraschend elegante Lösung verwendet nur wenige Zeilen von CSS -Gitter. Dieser Artikel beschreibt drei einfache CSS -Gittertechniken, um dies ohne JavaScript zu erreichen.

Das Problem: Erweiterbare Produktkarten

Hier ist ein vereinfachtes Beispiel für die UI -Aufgabe: Unsere Bibliothek für die Storybook Component bietet ein Produktkartennetz. Jede Karte benötigte eine "Schnellansicht" -Taste, um eine größere, vollständige Karte mit detaillierten Produktinformationen anzuzeigen. Diese Erweiterung musste:

• Fügen Sie dynamisch die vollwertige Karte unter der geklickten Karte ein.
• Bewahren Sie die ursprüngliche DOM -Reihenfolge und die visuelle Netzanordnung auf.
• Bleiben Sie in Browser -Größen vollständig reaktionsschnell.

Anfangs nahm ich an, dass JavaScript für die Neupositionierung von Karten notwendig sein würde. Online -Suche nach "Schnellansicht" -Implementierungen ergab hauptsächlich modale oder Overlay -Lösungen. Modale sind für fokussierte Inhalte üblich, aber ich wollte eine Lösung, die nahtlos in das Netz integriert wurde.

Die Lösung kam aus der Kombination mehrerer leistungsstarker CSS -Gitterfunktionen.

CSS Grid Trick #1: automatische Spalten

Mein vorhandenes Netzsystem hat diese Technik bereits verwendet:

 .Netz {
  Anzeige: Grid;
  Lücke: 1Rem;
  Grid-Template-Säulen: Wiederholen (automatisch, 20REM);
}

grid-template-columns: repeat(auto-fit, 20rem); Erstellt Spalten (20REM hier), die sich automatisch an den verfügbaren Raum anpassen und nach Bedarf an neue Zeilen einwickeln. Sara Soueidans Erklärung von auto-fit vs. auto-fill ist ausgezeichnet. Der Einfachheit halber habe ich feste Spaltenbreiten verwendet.

CSS Grid Trick #2: Vollbreite Spannweite

Um der erweiterten Karte aufzunehmen:

 .Fullwidth {
  Grid -Säule: 1 / -1;
}

Da der Trick Nr. 1 ein explizites Netz erzeugt, grid-column: 1 / -1; erstreckt sich über die gesamte Breite (von Spalte 1 bis zur letzten).

Dadurch bleibt jedoch Lücken über der Vollbreite-Karte.

CSS Grid Trick #3: Dichtes Verpacken

Wenn Sie diese Lücken füllen, wird ein Faux-Masonry-Ansatz verwendet:

 .Netz {
  Grid-Auto-Flow: dichter;
}

grid-auto-flow: dense; Optimiert die automatische Plazement und fülle Lücken früher im Netz. Dies funktioniert effektiv, wenn:

• Alle Spalten haben die gleiche Breite (oder verwenden Sie minmax() für flexible Breiten).
• Alle Zellen innerhalb einer Zeile haben die gleiche Höhe (die Standardeinstellung; align-items: stretch lässt implizit Zellen die Zeilenhöhe füllen).

Die ursprüngliche DOM -Reihenfolge ist erhalten und für die Zugänglichkeit von entscheidender Bedeutung. MDN liefert eine umfassende Erklärung des CSS-Gitter-Auto-Placements.

Die vollständige Lösung

Diese drei Techniken erzeugen ein einfaches, effizientes Layout mit minimalem CSS, ohne Medienabfragen und ohne JavaScript für Layoutberechnungen.

JavaScripts Rolle

JavaScript ist nach wie vor erforderlich, jedoch nur für die Funktionalität: Klick -Ereignisse, Fokussierung und Anzeige der injizierten Karte. Im Prototyp sind die Karten mit voller Breite fest codiert. JavaScript wechselt ihre Sichtbarkeit.

In einer Produktionsumgebung würde die Karte wahrscheinlich dynamisch abgerufen und eingefügt. Um das Aufblähen des DOM zu vermeiden, sollte der injizierte Inhalt als fortschreitende Verbesserung angesehen werden. Wenn JavaScript fehlschlägt, werden Benutzer auf die Seite Produktdetails umgeleitet.

Überlegungen zur Zugänglichkeit

Priorisierung der semantischen HTML, ARIA -Attribute und der Tastaturnavigation:

• Das Netz verwendet<ul> für semantische Klarheit.</ul>
• Produktkarten sind<li> Elemente mit richtigen Überschriften.</li> <li> Die DOM -Reihenfolge ist für die natürliche Registerkartenreihenfolge erhalten.</li> <li> Focus Management sorgt für eine ordnungsgemäße Tastaturnavigation. (Weitere Verbesserungen können explizite Beschriftungen für die injizierte Karte, <kbd>die ESC</kbd> -Schlüsselbindung für das Schließen und das Scrollen für Ansichtsfenster umfassen, um die Sichtbarkeit sicherzustellen.)</li>

Abschluss

Dieser Ansatz bietet eine saubere Alternative zu Modals und zeigt zusätzliche Inhalte, ohne die Seite zu verdecken. Es kann für verschiedene Szenarien wie Bildunterschriften oder Helfertext nützlich sein, was möglicherweise ersetzt / / ersetzt <details>/<summary></summary></details> in einigen Fällen. Ich bin gespannt auf Ihre Gedanken und alternativen Ansätze.

Das obige ist der detaillierte Inhalt vonErweiterbare Abschnitte innerhalb eines CSS -Gitters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!