Easy CSS Grids

Inspired by flow.gs

Select the desired number of columns, the size of gutters and padding, and space between rows to generate lightweight CSS for a custom grid system

Select number of columns

Select gutter size

Select padding size

Select row gutter size

Select the code

Click below to select the code, then copy it into a CSS file

Example usage

Click below to select the code, and copy it into an HTML file as a skeleton for your page

				
	<div class="container"> <!--Wrap your grid in a container and give it a desired width-->

		<div class="row">
			
			<div class="col-1">
				<div class="column-content">...</div> <!--Put your content here if you want your columns to have padding.  If your grid has no padding, you don't need this div.-->
			</div>

			<div class="col-2"> <!--This column is twice as wide as one-->
						<div class="column-content">...</div>
			</div>

			<div class="col-3"> <!--This column is 3x as wide as one-->
				<div class="column-content">...</div>
			</div> 

		</div> <!--End row-->

	</div> <!--End grid container-->