A responsive CSS grid system

How many columns?

1

Set the gutter width

1.25

Set column padding

0

Now grab the code

Click anywhere in the code box to select all the code. Copy it and pop it into your CSS file.

/*! 
 * Flow - A Fully Fluid Responsive Grid System
 * Created by Isaac Gray
 *
 * Generate a grid at http://flow.gs
 */
 
.section {
	clear: both;
	padding: 0;
	margin: 0;
}

.col {
	display: block;
	float:left;
	width: 100%;
	box-sizing: border-box; /* Supported by IE 8+. If IE 7 and below support is required see http://html5please.com/#box-sizing */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	background-clip: padding-box; /* This allows column elements to have background colour without it bleeding into the gutter. Supported by IE 9+. If support for IE 8 and below is required, a content div with background colour should be placed inside the column */
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
}

.group:before,
.group:after {
	content:"";
	display:table;
}

.group:after {
	clear:both;
}

@media only screen and (min-width:480px) {

	.col {
		width: auto;
	}
}

Usage

It's super simple. Generate some CSS code above. Pop that into your project's CSS file. Then just structure your HTML as below and you're all set.

<!-- Use this as a template for your HTML. -->

<div class="container-foo"> <!-- Wrap your grid in a container to control its width. Giving your container a max-width of 960px and centering it using margin: 0 auto; is a good place to start. -->
	<div class="section group"> <!-- This is a row -->
		<div class="col s1">...</div> <!-- These are columns -->
		<div class="col s4">...</div>
	</div>
</div>

<!-- You can nest columns in one another. -->

<div class="section group"> <!-- This is a row -->
	<div class="col s4"> <!-- This is a column -->
		<div class="section group"> <!-- This is a nested row -->
			<div class="col s2">...</div> <!-- These are nested columns -->
			<div class="col s2">...</div>
		</div>
	</div>
</div>

flow.gs is still very much in beta mode. If you have any feedback or suggestions, or if you spot any bugs, let me know at hello@flow.gs