CSS Grids using LESS

21 May 2015

I had some time to myself this evening... Yep, you heard me right... and I used it wisely, messing around with the glory of making my own CSS grid system, because I'm completely insane!

I created this simple system to be used with a big project I am currently working on, (which I will probably tell you more about when the time comes). However, consider it a gift from me to the internet and feel free to use it in your own projects too, and if you add something cool or better then be sure to share it with me.

Background

It's made in LESS for easy adaptation and makes a nice 12 column grid with a small amount of maintainable code. Below is the code, and a quick demo.

The code

HTML + LESS
<html>
	<head>
		<style type="text/less">
			@margin: 1.6%;
			.grid, [class*="column"], .row
			{
				position:relative;
				min-height:20px;
				float:none;
				box-sizing:border-box;
				-webkit-box-sizing:border-box;
				-moz-box-sizing:border-box;
			}
			.grid
			{
				width:50%;

				&, row
				{
					display:block;
					height:auto;
					overflow:hidden;
				}
				.row
				{
					width:100%;
					margin-bottom:1rem;
				}
				[class*="column"]
				{
					position:relative;
					float:left;
					background-color:#333333;
					border-radius:2px;
					
					& + [class*="column"] 
					{
						margin-left:@margin;
					}
				}
			}
			/*
				The math bit
			 	(100% - (margin*(max_number_of_columns-1))) / max_number_of_columns)
			*/
			.column-1 { width:(100% - (@margin*(12-1))) / 12; }
			.column-2 { width:(100% - (@margin*(6.45-1))) / 6.45; }
			.column-3 { width:(100% - (@margin*(4-1))) / 4; }
			.column-4 { width:(100% - (@margin*(3-1))) / 3; }
			.column-5 { width:(100% - (@margin*(2.45-1))) / 2.45; }
			.column-6 { width:(100% - (@margin*(2-1))) / 2; }
			.column-7 { width:(100% - (@margin*(1.73-1))) / 1.73; }
			.column-8 { width:(100% - (@margin*(1.51-1))) / 1.51; }
			.column-9 { width:(100% - (@margin*(1.34-1))) / 1.34; }
			.column-10 { width:(100% - (@margin*(1.20-1))) / 1.20; }
			.column-11 { width:(100% - (@margin*(1.092-1))) / 1.092; }
			.column-12 { width:(100% - (@margin*(1-1))) / 1; }
		</style>
		<script src="less.js"></script>
	</head>
	<body>
		<div class="grid">
			<div class="row">
				<div class="column-12"></div>
			</div>

			<div class="row">
				<div class="column-6"></div>
				<div class="column-6"></div>
			</div>
			<div class="row">
				<div class="column-3"></div>
				<div class="column-3"></div>
				<div class="column-3"></div>
				<div class="column-3"></div>
			</div>
			<div class="row">
				<div class="column-4"></div>
				<div class="column-4"></div>
				<div class="column-4"></div>
			</div>
			<div class="row">
				<div class="column-3"></div>
				<div class="column-3"></div>
				<div class="column-3"></div>
				<div class="column-3"></div>
			</div>
			<div class="row">
				<div class="column-6"></div>
				<div class="column-3"></div>
				<div class="column-3"></div>
			</div>
			<div class="row">
				<div class="column-11"></div>
				<div class="column-1"></div>
			</div>
			<div class="row">
				<div class="column-1"></div>
				<div class="column-1"></div>
				<div class="column-1"></div>
				<div class="column-1"></div>
				<div class="column-1"></div>
				<div class="column-1"></div>
				<div class="column-1"></div>
				<div class="column-1"></div>
				<div class="column-1"></div>
				<div class="column-1"></div>
				<div class="column-1"></div>
				<div class="column-1"></div>
			</div>

		</div>
	</body>
</html>

The demo

Comments

comments