A responsive CSS grid system

How many columns?


Set the gutter width


Set column padding


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;
	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:after {

.group:after {

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

	.col {
		width: auto;


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>

<!-- 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>

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