Grid...

[marctrix]

Hej Yadgar,

Jetzt habe ich mir doch mal die Eigenschaften-Übersicht auf dem "Complete Guide to Grid" angesehen und hatte hinterher das Gefühl, es verstanden zu haben[…] Jedenfalls sind alle Abschnitte (Texte und Bilder) doof nach links ausgerichtet und stehen übereinander statt nebeneinander...

Sind aber lesbar und bedienbar — das ist Dein Fallback für Browser, die Grid noch nicht verstehen.

Die CSS-Datei sieht so aus:

p, td, h2, h3, h4 { font-family:Arial,sans-serif; line-height:150% }

h2, h3 { border-bottom:2px solid black }

td { padding:5px }
tr.t { text-align:left }
tr.i { text-align:center }

div.container { display:grid; grid-template-columns:25% 25% 25% 25%; grid-template-rows:auto }
div.textleft { grid-column-start:1; grid-column-end:4 }
div.imgleft { grid-column-start:1; grid-column-end:2 }
div.textright { grid-column-start:2; grid-column-end:5 }
div.imgright { grid-column-start:4; grid-column-end:5 }
div.mono { grid-column-start:1; grid-column-end:5 }

Statt 25% kannst du auch 1fr schreiben, wenn eh alle columns gleich breit sein sollen. 1fr steht für das Verhältnis eines Teils (fraction) zu den anderen. Wenn du eine Aufteilung von 2 Drittel zu einem drittel haben möchtest, kannst da das z. B. so schreiben: grid-template-columns: 2fr 1fr;

Du brauchst dich dann gar nicht mehr drum zu kümmern, wie viel Prozent das sein müssen, das macht der Browser für Dich.

Für vier gleich breite Spalten gibt es auch eine Kurzschreibweise (davon bin ich aber gerade bei den ersten Schritten kein Freund, die längeren machen es einem bewusst, was man tut und erleichtern am Anfang das Finden von Fehlern — geht mir jedenfalls so):

grid-template-columns: repeat(4, 1fr);

Was meint Ihr dazu?

Von mir hast du ein Plus, weil ich weiß, dass du CSS Grid erst ablehnend gegenüber standst und es nun doch ausprobierst. Selbst wenn du es nach dem Test (noch) nicht produktiv einsetzen möchtest (z.B. weil du nicht nur neueste Browser unterstützen möchtest und (noch) nicht mit den Fallbacks leben kannst/willst).

CSS Grid ist ein tolles neues Werkzeug, das schon von vielen Browsern unterstützt wird. Wenn Du es für Deine private Sammlung an Webfundstücken schon nutzen möchtest (warum nicht einfach Links sammeln, z.B. in einer Notizen-App?!?), dann spricht nichts dagegen. Erstelle Dein Layout zunächst mit floats und stülpe dann CSS Flexbox oder CSS Grid drüber: das überschreibt in den Browsern, die es verstehen, das float-Layout, das dir als Backup für ältere Browser dient. Nur Tabellen würde ich dann nicht einsetzen - denn die machen dir das Überschreiben dann unnötig schwer.

Wenn schon Tabellen, dann CSS-Tabellen - die kannst du dann nämlich wieder mit CSS Grid überschreiben:

foo { display: table; }  /* Für Browser, die das folgende nicht verstehen        */
foo { display: grid; }   /* Wird ignoriert von Browsern, denen das unbekannt ist */

Marc