Chris zeigte uns vor einiger Zeit, dass CSS-Grid-Bereiche und ihre Elemente nicht unbedingt gleich groß sind. Das ist ein interessanter Punkt, denn man könnte annehmen, dass das Einfügen von Elementen in einen Grid-Bereich diesen Bereich vollständig ausfüllt. Tatsächlich reservieren Grid-Bereiche jedoch den definierten Platz und setzen die Eigenschaften justify-content und align-items des Elements standardmäßig auf den Wert stretch.
Also... ja, sie sind gleich groß, aber nicht unbedingt.
Chris beendete seinen Beitrag mit der Frage "Wen kümmert's?", ohne jemanden Bestimmten im Sinn zu haben. Der Punkt war vielmehr, dies als Ausgangspunkt für Leute zu bezeichnen, die Inhalte im Grid ausrichten müssen.
Ich bin mir nicht sicher, ob ich eine bessere Antwort habe, aber es brachte mich auf die Idee, dass es Spaß machen könnte, wenn wir diese automatisch zugewiesenen stretch-Werte nutzen könnten, um eine Benutzeroberfläche auf interessante Weise anzupassen.
Ich sage nicht, dass einige dieser Anwendungsfälle großartig sind. Tatsächlich mögen sie geradezu albern sein. Nichtsdestotrotz können sie vielleicht der Ausgangspunkt für andere Ideen sein.
Streckende Formularfelder
Eine Idee ist, Formularen etwas Interaktivität zu verleihen. Wenn unser <form> der Grid-Container ist, können wir Texteingabefelder so einstellen, dass sie mit dem Wert start an ihrer Standardbreite beginnen und sich dann durch Umschalten auf den Wert stretch bei einem :focus-Zustand auf die volle Breite des Containers ausdehnen.
.grid__form {
display: grid;
}
.grid__input {
justify-self: start;
}
.grid__input:focus {
justify-self: stretch;
}Siehe den Pen CSS Grid: Grid Child Stretch on Focus von Geoff Graham (@geoffgraham) auf CodePen.
Andererseits können wir mit Flexbox bereits etwas Ähnliches tun, aber mit dem Vorteil, dass flex eine animierbare Eigenschaft ist.
Siehe den Pen Flexbox: Child Stretch on Focus von Geoff Graham (@geoffgraham) auf CodePen.
Ich bin ehrlich gesagt nicht sicher, ob das Erweitern von Formularfeldern beim Fokus eine großartige UX-Erfahrung wäre, aber es macht auf jeden Fall Spaß, damit zu spielen.
Vorhang-Aufzieheffekt neu betrachtet
Wir haben letztes Jahr einen klassischen CSS-Trick gepostet, der den Checkbox-Hack verwendet, um den Effekt eines sich öffnenden Vorhangs zu erzeugen, um dahinterliegende Inhalte freizulegen.
Siehe den Pen OXJMmY von Geoff Graham (@geoffgraham) auf CodePen.
Das nutzte Breiten und Positionierung, um Elemente per Klick zu verschieben. Wir hätten etwas Ähnliches mit Grid machen können. Auch hier ist es weniger robust, da Animationen fehlen und der Vorhang nicht vollständig geöffnet werden kann. Es zeigt jedoch, wie wir die Werte stretch, start und end eines Grid-Elements und seine Größenanpassung nutzen können, um einige interessante Ideen zu realisieren.
Siehe den Pen CSS Grid Curtain Reveal von Geoff Graham (@geoffgraham) auf CodePen.
Was noch?
Die Tatsache, dass Grid-Elemente nicht immer die Größe des Grid-Bereichs haben, ist ein nützlicher Tipp, den wir bei der Entwicklung von Layouts im Hinterkopf behalten sollten. Ich wette, wir können weitere Ideen entwickeln, um dieses Konzept auf die nächste Stufe zu heben und gemeinsam Spaß damit zu haben. Teilt sie, wenn ihr welche habt!