grid.less

.grid {
	margin: 0 auto;
	width: 480px;

	._(@n) {
		width: 100% / 8 * @n - 2 * 1%;
	}

	._01 {
		._(1);

		> ._01 {
			margin: 0;
			width: 100%;
		}
	}

	._02 {
		._(2);

		> ._01 {
			width: 50.000% - 2%;

			&.alpha,
			&.omega {
				width: 50.000% - 1%;
			}
		}

		> ._02 {
			margin: 0;
			width: 100%;
		}
	}

	._03 {
		._(3);

		> ._01 {
			width: 33.333% - 2%;

			&.alpha,
			&.omega {
				width: 33.333% - 1%;
			}
		}

		> ._02 {
			width: 66.667% - 2%;

			&.alpha,
			&.omega {
				width: 66.667% - 1%;
			}
		}

		> ._03 {
			margin: 0;
			width: 100%;
		}
	}

	._04 {
		._(4);

		> ._01 {
			width: 25.000% - 2%;

			&.alpha,
			&.omega {
				width: 25.000% - 1%;
			}
		}

		> ._02 {
			width: 50.000% - 2%;

			&.alpha,
			&.omega {
				width: 50.000% - 1%;
			}
		}

		> ._03 {
			width: 75.000% - 2%;

			&.alpha,
			&.omega {
				width: 75.000% - 1%;
			}
		}

		> ._04 {
			margin: 0;
			width: 100%;
		}
	}

	._05 {
		._(5);

		> ._01 {
			width: 20.000% - 2%;

			&.alpha,
			&.omega {
				width: 20.000% - 1%;
			}
		}

		> ._02 {
			width: 40.000% - 2%;

			&.alpha,
			&.omega {
				width: 40.000% - 1%;
			}
		}

		> ._03 {
			width: 60.000% - 2%;

			&.alpha,
			&.omega {
				width: 60.000% - 1%;
			}
		}

		> ._04 {
			width: 80.000% - 2%;

			&.alpha,
			&.omega {
				width: 80.000% - 1%;
			}
		}

		> ._05 {
			margin: 0;
			width: 100%;
		}
	}

	._06 {
		._(6);

		> ._01 {
			width: 16.667% - 2%;

			&.alpha,
			&.omega {
				width: 16.667% - 1%;
			}
		}

		> ._02 {
			width: 33.333% - 2%;

			&.alpha,
			&.omega {
				width: 33.333% - 1%;
			}
		}

		> ._03 {
			width: 50.000% - 2%;

			&.alpha,
			&.omega {
				width: 50.000% - 1%;
			}
		}

		> ._04 {
			width: 66.667% - 2%;

			&.alpha,
			&.omega {
				width: 66.667% - 1%;
			}
		}

		> ._05 {
			width: 83.333% - 2%;

			&.alpha,
			&.omega {
				width: 83.333% - 1%;
			}
		}

		> ._06 {
			margin: 0;
			width: 100%;
		}
	}

	._07 {
		._(7);

		> ._01 {
			width: 14.286% - 2%;

			&.alpha,
			&.omega {
				width: 14.286% - 1%;
			}
		}

		> ._02 {
			width: 28.571% - 2%;

			&.alpha,
			&.omega {
				width: 28.571% - 1%;
			}
		}

		> ._03 {
			width: 42.857% - 2%;

			&.alpha,
			&.omega {
				width: 42.857% - 1%;
			}
		}

		> ._04 {
			width: 57.143% - 2%;

			&.alpha,
			&.omega {
				width: 57.143% - 1%;
			}
		}

		> ._05 {
			width: 71.429% - 2%;

			&.alpha,
			&.omega {
				width: 71.429% - 1%;
			}
		}

		> ._06 {
			width: 85.714% - 2%;

			&.alpha,
			&.omega {
				width: 85.714% - 1%;
			}
		}

		> ._07 {
			margin: 0;
			width: 100%;
		}
	}

	._08 {
		._(8);

		> ._01 {
			width: 12.500% - 2%;

			&.alpha,
			&.omega {
				width: 12.500% - 1%;
			}
		}

		> ._02 {
			width: 25.000% - 2%;

			&.alpha,
			&.omega {
				width: 25.000% - 1%;
			}
		}

		> ._03 {
			width: 37.500% - 2%;

			&.alpha,
			&.omega {
				width: 37.500% - 1%;
			}
		}

		> ._04 {
			width: 50.000% - 2%;

			&.alpha,
			&.omega {
				width: 50.000% - 1%;
			}
		}

		> ._05 {
			width: 62.500% - 2%;

			&.alpha,
			&.omega {
				width: 62.500% - 1%;
			}
		}

		> ._06 {
			width: 75.000% - 2%;

			&.alpha,
			&.omega {
				width: 75.000% - 1%;
			}
		}

		> ._07 {
			width: 87.500% - 2%;

			&.alpha,
			&.omega {
				width: 87.500% - 1%;
			}
		}

		> ._08 {
			margin: 0;
			width: 100%;
		}
	}

	._01,
	._02,
	._03,
	._04,
	._05,
	._06,
	._07,
	._08 {
		display: inline;
		float: left;
		position: relative;
		margin: 0 1%;

		&.alpha {
			margin-left: 0;
		}

		&.omega {
			margin-right: 0;
		}
	}
}

.clear {
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
}

.grid,
.group {
	zoom: 1;

	&:after,
	&:before {
		content: '.';
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		overflow: hidden;
		visibility: hidden;
		width: 0;
	}

	&:after {
		clear: both;
	}
}