Spaß Mal Mit Sizing Grid-Elemente

0
109

Chris zeigte uns eine kleine Weile zurück, dass CSS-grid-Bereichen, und Ihre Elemente sind nicht unbedingt die gleiche Größe. Es ist ein interessanter Punkt, da könnte man annehmen, dass die Dinge in grid-Bereich würde die Dinge besetzen den gesamten Platz, aber die Gitter eigentlich reserve der Raum definiert durch das raster und legen Sie das element der Rechtfertigung, Inhalt und Ausrichtung-Elemente, die Eigenschaften einer Strecke Wert standardmäßig.

Also… ja, Sie sind die gleiche Größe, aber nicht unbedingt.

Chris beendet seinen post mit der Frage “who cares?” wobei niemand im besonderen. Der Punkt war viel mehr darauf ausgerichtet, ruft dieser aus, als ein Ausgangspunkt für Leute, die notwendige Anpassung der Inhalte im Netz.

Ich bin mir nicht sicher, ob ich eine bessere Antwort, aber es machte mich denke, es wäre lustig, wenn wir das nutzen könnten, dass diese Funktion zugewiesen stretch-Werte zur Anpassung einer Benutzeroberfläche auf interessante Weise.

Ich sage nicht, dass jede dieser großen Anwendungsfälle. In der Tat kann Sie geradezu albern. Das heißt, vielleicht können Sie ein Ausgangspunkt für weitere Ideen.

Stretching Formularfelder

Eine Idee ist, fügen Sie einige Interaktion mit Formularfeldern. Wenn unser <form> ist der grid-container, dann können wir die text-Eingaben, wo Sie beginnen bei Ihren Standard-Breite mit dem Wert start, und dann erweitern Sie die volle Breite des Containers durch den Umstieg auf die Strecke Wert auf eine :focus-Zustand:

.Gitter__form {
display: grid;
}

.Gitter__Eingang {
rechtfertigen-selbst: start;
}

.Gitter__input:focus {
rechtfertigen-self: stretch;
}

Finden Sie die Stift-CSS-Grid: Grid-Kind-Stretch im Fokus von Geoff Graham (@geoffgraham) auf CodePen.

Dann wieder, können wir schon etwas tun, ähnlich wie mit Flexbox, aber mit dem Vorteil der flex wird eine animierte Eigenschaft:

Finden Sie den Stift Flexbox: Kind Strecken im Fokus von Geoff Graham (@geoffgraham) auf CodePen.

Ich bin ehrlich gesagt nicht sicher, wo wachsende form Felder auf die Konzentration machen würde für große UX-aber es ist sicherlich Spaß zu spielen.

Vorhang Öffnen Wirkung Wieder Besucht

Wir veröffentlicht einen good ol’ fashioned CSS-trick im letzten Jahr, nutzt den checkbox-hack um den Effekt zu schaffen, einen Vorhang öffnen, um zu offenbaren Inhalt dahinter.

Finden Sie den Stift OXJMmY von Geoff Graham (@geoffgraham) auf CodePen.

Dass verwendet werden, breiten und Positionierung, um Dinge bewegen, auf klicken, aber wir konnten etwas getan haben, ähnlich wie mit Grid. Wieder, dies ist weniger robust, weil es fehlt die animation und die nicht zulässt, dass der Vorhang vollständig geöffnet werden, es zeigt jedoch, wie können wir nutzen die Strecke, start-und end-Werte einer grid-element und dessen Dimensionierung zu erreichen, einige interessante Ideen.

Finden Sie die Stift-CSS-Grid-Vorhang Enthüllen von Geoff Graham (@geoffgraham) auf CodePen.

Was Sonst?

Die Tatsache, dass grid-Elemente sind nicht immer die Größe des grid-Bereich ist ein schöner Tipp zu halten in unserer back s-wir entwickeln layouts. Ich würde Wetten, wir kommen mit mehr Ideen zu diesem Konzept auf ein neues level und haben Spaß mit ihm, wie eine Gruppe. Anteil ’em, wenn Sie ’em!