Sass inline-block grid

index.haml

.grid.grid-with-gutter.row
  .grid-cell.grid-12
    %p .grid-12
    
.grid.grid-with-gutter.row
  .grid-cell.grid-11
    %p .grid-11
  .grid-cell.grid-1
    %p .grid-1

.grid.grid-with-gutter.row
  .grid-cell.grid-10
    %p .grid-10
  .grid-cell.grid-2
    %p .grid-2

.grid.grid-with-gutter.row
  .grid-cell.grid-9
    %p .grid-9
  .grid-cell.grid-3
    %p .grid-3

.grid.grid-with-gutter.row
  .grid-cell.grid-8
    %p .grid-8
  .grid-cell.grid-4
    %p .grid-4
    
.grid.grid-with-gutter.row
  .grid-cell.grid-7
    %p .grid-7
  .grid-cell.grid-5
    %p .grid-5
      
.grid.grid-with-gutter.row
  .grid-cell.grid-6
    %p .grid-6
  .grid-cell.grid-6
    %p .grid-6

.grid.grid-with-gutter.row
  .grid-cell.grid-5
    %p .grid-5
  .grid-cell.grid-7
    %p .grid-7
      
.grid.grid-with-gutter.row
  .grid-cell.grid-4
    %p .grid-4
  .grid-cell.grid-8
    %p .grid-8

.grid.grid-with-gutter.row
  .grid-cell.grid-3
    %p .grid-3
  .grid-cell.grid-9
    %p .grid-9
 
.grid.grid-with-gutter.row
  .grid-cell.grid-2
    %p .grid-2
  .grid-cell.grid-10
    %p .grid-10
      
.grid.grid-with-gutter.row
  .grid-cell.grid-1
    %p .grid-1
  .grid-cell.grid-11
    %p .grid-11

.grid.grid-with-gutter.row
  .grid-cell.grid-12
    %p .grid-12

sass-inline-block-grid.markdown

Sass inline-block grid

A Pen by Steve on CodePen.

License.

script.js

// Must be wrapped in a container with padding.
// Will cause a scrollbar if it's as wide as the viewport.
// ---------------------------
// General usage
// ---------------------------
// 	<div class="container">
//		<div class="grid grid-with-gutter">
//			<div class="grid-cell grid-4">
//			</div>
//			<div class="grid-cell grid-2">
//			</div>
//		</div>
//	</div>

style.scss

// Variables
// ---------------------------
$default-grid-columns: 12 !default;
$default-grid-gutter: 6px !default;

$a: 540px !default;
$b: 640px !default;
$c: 840px !default;

// Add additional sizes if necessary, highly recommended you change this to be
// tailored to your breakpoints, that match the design.
$default-grid-map: ( small: $a, medium: $b, large: $c ) !default;
$default-grid-font-size-normal: 1rem !default;

// Grid container
// ---------------------------
@mixin grid-container($grid-gutter: $default-grid-gutter) {
	.grid {
		display: block;
		padding: 0;
		margin: 0;
		text-align: left;
		font-size: 0; }
	
	.grid-with-gutter {
		margin: 0 #{-$grid-gutter}; }
	
	.grid-center {
		text-align: center; }
	
	.grid-right {
		text-align: right; } }

// Grid cell
// ---------------------------
@mixin grid-cell-font-size($grid-map: $default-grid-map) {
	font-size: $default-grid-font-size-normal; }
		
@mixin grid-cell(
	$grid-gutter: $default-grid-gutter,
	$grid-map: $default-grid-map
) {
	.grid-cell {
		display: inline-block;
		margin: 0;
		padding: 0;
		text-align: left;
		vertical-align: top;
		width: 100%;
		
		@include grid-cell-font-size($grid-map); }

	.grid-with-gutter > .grid-cell {
		padding: 0 $grid-gutter; } }


// Grid widths
// ---------------------------					
@mixin grid-width-default(
	$grid-columns	: $default-grid-columns,
	$grid-map			: $default-grid-map
) {
	$column-increment: 1;
	
	@for $column-increment from 1 through $grid-columns {
		.grid-#{$column-increment} {
			$w: (100% / $grid-columns) * $column-increment;
			width: $w; } } }
					
@mixin grid-width(
	$grid-columns	: $default-grid-columns,
	$grid-map			: $default-grid-map
) {
	$column-increment: 1;
	
	@each $breakpoint, $width in $grid-map {
		$class: unquote(".grid-#{$breakpoint}");
	
		@media (min-width: $width) {
			@for $column-increment from 1 through $grid-columns {
				#{$class}-#{$column-increment} {
					$w: (100% / $grid-columns) * $column-increment;
					width: $w; } } } } }
		
// Simple grid using
// display: inline-block
// ---------------------------
@mixin grid(
	$grid-columns	: $default-grid-columns,
	$grid-gutter	: $default-grid-gutter,
	$grid-map			: $default-grid-map
) {
	@include grid-container($grid-gutter);
	@include grid-cell($grid-gutter, $grid-map);
	@include grid-width-default($grid-columns, $grid-map);
	@include grid-width($grid-columns, $grid-map); }

// Setup
html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

@include grid;

// Alignment
.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

// Misc bits
body {
  padding: 24px;
  background: #e1f7ee; }

p {
  border-radius: 4px;
  margin: 0;
  padding: 12px;
  background: #1a626e;
  font-size: 12px;
  color: #6ad4b6;
  font-weight: 700; }

.row { margin-bottom: 12px; }