Verwenden Sie keine leeren oder inhaltsarmen Beispiele für das Grid-System Ihres Designsystems

Dave und ich hatten neulich Jen Simmons zu Gast bei ShopTalk. Jen sprach über Intrinsic Web Design und wie eine der Kernideen davon Grids mit Zeilen und Spalten sind, die sich nicht unbedingt gleich schnell ändern, oder die im Grunde unterschiedliche Regeln für ihr Verhalten haben.

Nehmen wir zum Beispiel dieses (erfundene) Grid-Setup

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

Jede dieser Spalten wird sich anders verhalten.

Ich versuche gerade erst, das zu verstehen, und verstehe es definitiv noch nicht vollständig. Hier ist, was mir dazu einfällt, nummeriert von 1-4 basierend auf der „Stärke“ (vermute ich?) der Breite.

.grid {
  display: grid;
  grid-template-columns: 
    1fr                  /* #4 - Weakest, will fill remaining space */
    minmax(50px, 100px)  /* #3 - Will only start changing when other columns force it */
    20%                  /* #1 - Definite size, steady */
    auto                 /* #2 - Indefinite size, entirely based on content, pushy */
  ;
}

Das unterscheidet sich stark von der Art und Weise, wie wir in der Vergangenheit Grid-Spalten eingerichtet haben. Float-basierte Grids verwenden typischerweise Prozentsätze (eine feste Größe), um Spalten festzulegen. Dasselbe gilt typischerweise für Inline-Block-basierte Grids.

Selbst mit Grid, wenn Sie alle Ihre Spalten mit *nur* Prozentangaben oder *nur* Bruchteilen einrichten, hätten Sie wahrscheinlich ein gleichmäßiges Grid, bei dem der Inhalt die Größe nicht beeinträchtigt. Aber Jen sagt, dass es interessant ist, Grids zu haben, *bei denen der Inhalt eine Rolle bei der Größenbestimmung spielt*. Nehmen Sie es an. Klingt für mich spaßig.

Aber egal, nehmen wir an, Sie richten ein Grid ein, das gemischte Werte für die Spaltenbreiten wie diese verwendet. Tun Sie das nicht mit völlig leeren Spalten, sonst bekommen Sie einen falschen Eindruck davon, wie sich diese Spalten verhalten werden.

Schauen Sie sich nur diese Demo an, in der diese vier Grids exakt das gleiche Setup haben und sich nur die Menge an Text in jeder Spalte unterscheidet.

Siehe den Pen Different Collapse Rates of Different Column Width Values von Chris Coyier (@chriscoyier) auf CodePen.

Cool und seltsam.