Eine frage an die Profis...

[Gunnar Bittersmann]

@@marctrix

1.) Du gibst der mittleren Spalte mehr Platz, zum Beispiel 2fr oder sogar 3fr. Damit wird die mittlere Spalte doppelt oder gar drei mal so breit, wie die Spalten links und rechts.

Das sieht so aus:

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

So sollte man das tun.

2.) Du legst mehr als drei Raster-Spalten an und kannst dann dem mittleren Bereich sagen, er soll sich über mehrere Raster-Spalten strecken. Da das ein klein wenig komplizierter ist, werde ich es hier vormachen:

body {
  display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

Nun haben wir acht Spalten […] Auf diesen Spalten kannst du nun Deine Elemente anordnen.

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

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

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.

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

LLAP 🖖