Verwenden Sie nicht leer oder leer Inhalte für Ihre design-system grid-Beispiele

0
20

Dave und ich hatte Jen Simmons auf ShopTalk den anderen Tag. Jen Sprach über Intrinsische Web-Design und Sie, wie einer der zentralen Grundsätze ist es raster mit Zeilen und Spalten, die nicht unbedingt ändern, mit der gleichen Geschwindigkeit, oder diejenigen, die im wesentlichen unterschiedliche Regeln, wie Sie sich Verhalten.

Zum Beispiel, nehmen Sie diese (ausgedachte) raster-setup:

.grid {
display: grid;
grid-template-columns: 1fr minmax(50px, 100px) 20% auto;
}

Jede dieser Spalten wird sich anders Verhalten.

Ich bin gerade Umhüllung meinem Kopf, über diese, und definitiv nicht vollständig verstehen. Hier ist, wie es scheint mir, nummeriert von 1-4 auf der Basis der “Kraft” (ich denke mal?) der Breite.

.grid {
display: grid;
grid-template-columns:
1fr /* #4 – Schwächste, füllen verbleibenden Platz */
minmax(50px, 100px) /* #3 – Wird nur dann ändern, wenn andere Spalten erzwingen */
20% /* #1 – Definitive Größe, stetig */
auto /* #2 – Unbestimmte Größe, vollständig auf die Inhalte, aufdringlich */
;
}

Dies ist sehr Verschieden von einer ziemlich langen Geschichte, wie wir festgelegt haben, um raster-Spalten in der Vergangenheit. Float-basierte Netze verwenden in der Regel Prozentsätze (einer bestimmten Größe) zu Spalten. Gleiche mit inline-block-basierte Netze, in der Regel.

Sogar mit Gitter, wenn Sie alle Ihre Spalten mit aller Anteile oder alle gebrochene Einheiten, würden Sie wahrscheinlich haben eine Feste raster, in denen der Inhalt nicht Durcheinander mit Größenanpassung. Aber Jen ist zu sagen, dass es interessant ist, ein Gitter, wo der Inhalt hat ein Mitspracherecht bei, wie Sie Größe. Es umarmen. Klingt lustig für mich.

Aber wie auch immer, sagen, du bist der Einrichtung ein raster verwendet, gemischt Werte für Spaltenbreiten, wie dieses. Tun Sie das nicht mit völlig leeren Spalten, andernfalls erhalten Sie einen falschen Eindruck davon, wie diese Spalten zu Verhalten.

Schauen Sie sich nur diese demo, wo diese vier Netze haben die exakt gleichen setup und alles, was anders ist, ist die Menge an text in jeder Spalte.

Finden Sie die Pen-Verschiedene Zusammenbruch Tarife Verschiedener Werte für Spaltenbreite von Chris Coyier (@chriscoyier) auf CodePen.

Cool ‘ N ‘ ‘weird.