Grid...

[Yadgar]

Hi(gh)!

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... aber etweder bin ich doch zu blöd, um Grid zu verstehen - oder mein Browser (Firefox 45.8.0, unter Debian Linux) packt es einfach nicht. Jedenfalls sind alle Abschnitte (Texte und Bilder) doof nach links ausgerichtet und stehen übereinander statt nebeneinander...

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 }

Was meint Ihr dazu?

[Gunnar Bittersmann]

@@Yadgar

aber etweder bin ich doch zu blöd, um Grid zu verstehen - oder mein Browser (Firefox 45.8.0, unter Debian Linux) packt es einfach nicht.

Nicht, um Grid zu verstehen, aber um deinen Browser aktuell zu halten‽ Aktuell ist 53.0.3, und der packt es.

LLAP 🖖

[TS]

Hello,

Nicht, um Grid zu verstehen, aber um deinen Browser aktuell zu halten‽ Aktuell ist 53.0.3, und der packt es.

Man kann ja auch voraussetzen, dass den alle User schon haben? :-P

Du weißt schon, dass die diversen Linux-Distributionen die vergeleichbaren (z. B. Ice-Weazel)-Versionen anders aktualisieren (andere Versionsnummern haben), als die anderen OSse?

Liebe Grüße
Tom S.

[Yadgar]

Hi(gh)!

Hello,

Nicht, um Grid zu verstehen, aber um deinen Browser aktuell zu halten‽ Aktuell ist 53.0.3, und der packt es.

Man kann ja auch voraussetzen, dass den alle User schon haben? :-P

Du weißt schon, dass die diversen Linux-Distributionen die vergeleichbaren (z. B. Ice-Weazel)-Versionen anders aktualisieren (andere Versionsnummern haben), als die anderen OSse?

Tja, so ein Mist aber auch... mit dem neuesten Firefox hat es unter Windows 7 tatsächlich funktioniert - normalerweise bin aber trotz Dual-System unter Linux (Debian Stable 8.5) unterwegs, und da ist Firefox 45.9.0 das Höchste der Gefühle - und jetzt mein ganzes Betriebssystem von Hand umzustricken, endlos herumzukompilieren und dabei ständig den Totalcrash zu riskieren, sorry, das ist Overkill, den ich nun wirklich nicht brauche! Daher werde ich eine Browser-/Systemweiche programmieren (auch wenn ich im Moment noch gar nicht weiß, wie das geht...) - und für Linux wie gehabt weiter tabellenlayouten. Doof und prollig, aber die Gurus bei Debian wollen das anscheinend so.

Und demnächst auf meinen geliebten rumpeligen alten 386ern, Atari STs und Commodore 64 wird es sowieso nur Tabellenlayout geben... natürlich kann man auch im Jumbo nach Indien jetten, aber zu Fuß ist es doch viel interessanter, oder?

Bis bald im Khyberspace!

Yadgar

[Felix Riesterer]

Lieber Yadgar,

normalerweise bin aber trotz Dual-System unter Linux (Debian Stable 8.5) unterwegs,

das OS ist Deine Wahl. Du wirst schon wissen, welche Distri Du für ein Desktop-System nutzt und warum.

Und demnächst auf meinen geliebten rumpeligen alten 386ern, Atari STs und Commodore 64 wird es sowieso nur Tabellenlayout geben...

Des Menschen Wunsch ist sein Himmelreich.

natürlich kann man auch im Jumbo nach Indien jetten, aber zu Fuß ist es doch viel interessanter, oder?

Frag Marco Polo.

Liebe Grüße,

Felix Riesterer.

[Matthias Scharwies]

Servus!

Daher werde ich eine Browser-/Systemweiche programmieren (auch wenn ich im Moment noch gar nicht weiß, wie das geht...) -

Evtl. mit @supports

und für Linux wie gehabt weiter tabellenlayouten. Doof und prollig, aber die Gurus bei Debian wollen das anscheinend so.

Ne,ne? Dann ist dir wirklich wohl nicht mehr wozu helfen.

Und demnächst auf meinen geliebten rumpeligen alten 386ern, Atari STs und Commodore 64 wird es sowieso nur Tabellenlayout geben... natürlich kann man auch im Jumbo nach Indien jetten, aber zu Fuß ist es doch viel interessanter, oder?

Bis bald im Khyberspace!

Yadgar

Herzliche Grüße

Matthias Scharwies

[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