CSS-Fluid-Grid-Layouts: Schluss mit Rechnen

Ich saß gerade einem Layout für eine Seite mit einem flexiblem Grid und Media Queries und fing an mit einem Dreisatz hin und herzurechnen. Und dann stand ich wieder vor den drei, immer wiederkehrenden großen Fragen des Boxenlayouts: 1: Wie viel Prozent Breite haben die Boxen und Margins? 1: Wem gibt Du die wie den Abstand zur nächsten Box? 2: Und wie klaust Du den überflüssigen Abstand rechts oder links, ohne zu wissen, ob es bei kleineren Bildschirmen nicht drei, sondern vielleicht nur zwei oder eine Spalte/Box geben wird? Ich Lösung für alle 3 Fragen fand ich mit dem Fluid Grids Calculator.

1: Schluss mit Rechnen

Der Calculator fragt die Spalten (Columns), deren Breite und den Abstand zwischen den Boxen ab und liefert das CSS für ein flexibles Grid. Alle Breitenangaben sind in Prozent [caption id="attachment_925" align="alignleft" width="423" caption="Screenshot: Fluid Grid Calculator"][/caption]

2: Abstände zur nächsten Box

Alle Boxen erhalten einen linken margin (z.B. margin: 0 0 0 2%). Damit haben aber nun die linken Boxen immer 2% zuviel Abstand links. Doch es folgt die Lösung...

3: Und wie klaust Du den überflüssigen Abstand links...

Die Lösung besteht darin, dem gesamten, die floatenden Boxen enthaltenen DIV einen linken, negativen margin zu geben. Der komplette CSS-Code sah dann so aus:

/*
Page container
*/
.wrapper{
	max-width:810px;
	padding:15px;
	margin:0 auto;
}

/*
Column container
*/
.grids{
	width:auto;
	max-width:840px;
	clear:both;
	margin:0 0 0 -3.571%;
	list-style:none; /* So we can make grids out of lists. */
	overflow:hidden; /* Clear the floats */
}

[class^="grid-"]{
	float:left;
	margin:0 3.571% 0 0;
}
.grids [class^="grid-"]{
	margin:0 0 0 3.571%;
}

.grid-1{ width:29.762% }
.grid-2{ width:63.095% }
.grid-3{ width:96.429%; margin:0; }

Eine gute Lösung, der Fluid Grids Calculator, zu finden unter csswizardry.com/fluid-grids.