Möchte man sich von Vorgegebenem lösen, ist die Umsetzung eines eigenen flexiblen Seitenlayouts durch einfache CSS-Befehle schnell realisierbar.

Sei es ein Kopf-, Inhalts- oder Fußbereich: Um die einzelnen Spalten definiert ein Blockelement die Höchst- und Mindestbreite des gesamten Bereiches, setzt diesen vertikal zentral und kann weitere gestalterische Informationen beinhalten. In dem folgenden Beispiel ist die Breite des Elementes mindestens 600px und maximal 1000px, zwischen diesen Werten passt sie sich automatisch der Fensterbreite an.

.bereich {
	width: 100%;
	max-width: 1000px;
	min-width: 600px;
	overflow: hidden;
	margin: 0 auto;
}

Nachdem die einzelnen Bereiche festgelegt wurden, können sie mit den Spalten gefüllt werden. Für die Bestimmung der Breite der einzelnen Spalten reicht einfache Mathematik: Soll die Gesamtbreite (100%) auf fünf Spalten gleich verteilt werden, erhält jede Spalte eine Breite von 20 Prozent. Sollen zwischen den Spalten Freiräume bestehen, so können diese der Spaltenbreite subtrahiert und als Außenabstand angegeben werden. Wichtig dabei ist zu beachten, dass der letzten Spalte kein rechter Außenabstand hinzugefügt werden soll, da sonst am rechten Seitenrand des Blockelementes ein Freiraum entsteht, der nicht gewünscht wird. Somit haben die fünf Spalten eine Breite von 90% (5 mal 18%) plus einen Zwischenbereich von insgesamt 10% (4 mal 2,5%).

.spalte {
	width: 18%;
	margin-right: 2,5%;
	float: left;
}

Der letzten Spalte muss folglich eine Klasse hinzugefügt werden, die dieser den rechten Außenabstand wieder entzieht:

.letzte { margin-right: 0; }

Nachdem alle CSS-Klassen für die Blockelemente, sowie die flexiblen Spalten definiert wurden, ist es einfacher Schritt, das HTML-Grundgerüst zu errichten. Der folgende Aufbau zeigt ein einfaches Blockelement mit den oben verwendeten fünf Spalten:

<div class="bereich">
	<div class="spalte">Erste Spalte</div>
	<div class="spalte">Zweite Spalte</div>
	<div class="spalte">Dritte Spalte</div>
	<div class="spalte">Vierte Spalte</div>
	<div class="spalte letzte">Fünfte Spalte</div>
</div>

Möchte man in der Spaltenanzahl zwischen einzelnen Elementen variieren, so können verschiedene Klassen für Spalten erstellt und eingesetzt werden. Sind die Verhältnisse zwischen Spaltenbreite und dem Zwischenraum festgelegt (immer in Prozent), können durch die beiden folgenden Formeln die richtigen Angaben berechnet werden.

• Spaltenbreite:
  (100 – Spaltenanzahl * Breite des gewünschten Zwischenabstandes) / Spaltenanzahl
• Zwischenabstand:
  (100 – Spaltenanzahl * Spaltenbreite) / (Spaltenanzahl – 1)

Zusammenfassend ist es keine Kunst, das auf die eigenen Wünsche zugeschnittene flexible Seitenlayout zu erstellen, sodass der Einsatz von fertigen Grid-Systemen nicht weiter notwendig ist. Mit diesem Verständnis ist es ein vielfaches leichter, ein ideal optimiertes und auf die Ansprüche komprimiertes Seitenlayout zu erstellen.