Eine frage an die Profis...

[marctrix]

Hej Gunnar,

@@marctrix

  display: grid;
	grid-template-columns: 1fr 2fr 1fr; /* Mitte bekommt 2mal so viel Platz wie die Ränder */

So sollte man das tun.

Das stimmt. Ich würde aber das andere gerne auch noch erklären. 😉

So nicht. Dann kann man ja gleich bei einem Gridsystem wie dem von Bootstrap bleiben. 🤢

Ein Gridsystem muss nicht unsinnig sein. Die acht Spalten hier sind lediglich dem Schachbrett geschuldet.

Hier geht es um Erklärung, nicht um die Umsetzung eines bekannten Layouts. Wie viele Spalten für lesende nötig sind, wissen wir gar nicht.

Zum einen ist

grid-template-areas:
	"header header header" 
	"nav    main   infoBox" 
	"footer footer footer";

besser zu lesen.

Noch wichtiger ist, dass es weitaus besser handhabbar und wartbar ist.

Wenn nun der Hauptinhalt nicht doppelt, sondern dreimal so breit sein soll wie die beiden Randspalten? Das ist schnell geändert: grid-template-columns: 1fr 3fr 1fr. Bei deinem 8er-Grid wäre das gar nicht möglich.

Dafür sind andere Dinge möglich. Wie viele Spalten nötig sind, weiß man nur, wenn man das konkrete Projekt kennt.

Wenn man in altem Spaltendenken verharrt, beraubt man sich selbt der Möglichkeiten, die CSS Grid bietet.

Es lohnt sich sicher, dass in weiteren Blogeinträgen zu besprechen. Rom ist auch nicht an einem Tag erbaut worden.

Marc