Guide to Responsive Grids

This mixin allows CSS-only fluid grids - no JavaScript required. The markup for one of these grids is a set of multiple <div class="grid-col"> elements wrapped in a <div class="repsonsive-grid"> element. Then a simple mixin is applied to turn it into fluid responsive columns. Advanced options are available (see examples below).

Example ISML:

<div class="my-class responsive-grid">
	<div class="grid-col">1</div>
	<div class="grid-col">2</div>
	<div class="grid-col">3</div>
	<div class="grid-col">4</div>
	<div class="grid-col">5</div>
</div>

Example SASS Mixin:

.my-class {
	@include column-respond((
		480px : 3,
		768px : 5,
		gutter : 10px
	));
}

Note: When using this mixin, if you override any of the following rules on .grid-col, you risk breaking the grid layout:

display
width
margin-left
margin-right
float
box-sizing
::before
::after

However, any other rules that do not increase the .grid-col element's overall width are fine to style, including the following:

padding
margin-top
margin-bottom
border
height
min-height

Example Default Grid Markup - No Mixin Applied

1 column of 100% width (default).

SCSS:

.example-grid-1 {
	// no mixin applied
}

HTML:

<div class="example-grid-1 responsive-grid">
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 1</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 2</p>
	</div>
</div>

RESULT:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Etiam quis erat tincidunt, posuere mauris ut, bibendum massa. Nullam rhoncus, velit vitae posuere dapibus, lectus lorem suscipit ligula, id convallis ex justo quis urna. Morbi ullamcorper non arcu vel ornare. Integer elementum, erat et bibendum tristique, neque dui sollicitudin risus, et facilisis felis augue vitae arcu.

Column 1

Column 2

Configured with @column-respond Mixin:

1 column below 600px (1 column is the mobile-first default)

2 columns between 600px and 768px

3 columns at 768px and up

5% gutters (spacing between interior columns)

SCSS:

.example-grid-2 {
	@include column-respond((
		600px : 2,
		768px : 3,
		gutter : 5%
	));
}

Compiled CSS:

.example-grid-2 .grid-col {
  position: relative;
  margin-left: 0; }
  @media only screen and (min-width: 600px) and (max-width: 767px) {
    .example-grid-2 .grid-col {
      width: 47.5%;
      margin-left: 5%; }
      .example-grid-2 .grid-col:nth-child(2n+1) {
        clear: both;
        margin-left: 0; } }
  @media only screen and (min-width: 768px) {
    .example-grid-2 .grid-col {
      width: 30%;
      margin-left: 5%; }
      .example-grid-2 .grid-col:nth-child(3n+1) {
        clear: both;
        margin-left: 0; } }

HTML:

<div class="example-grid-1 responsive-grid">
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 1</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 2</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 3</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">This column will overflow...</p>
		<p class="style-spec">Column 4</p>
	</div>
</div>

RESULT:

Column 1

Column 2

Column 3

At 768px, this column will overflow to the next row by default, since this grid is never configured to be 4 (or more) columns across. This column will overflow to the next row by default, since this grid is never configured to be 4 (or more) columns across. This column will overflow to the next row by default, since this grid is never configured to be 4 (or more) columns across.

Column 4

Example with one abnormally tall tile:

2 columns below 480px (overrides the mobile-first default of 1 column by setting a 0px breakpoint... see below)

3 columns between 480px and 600px

4 columns between 600px and 768px

6 columns with 15px gutters between 768px and 1200px

8 columns with 5px gutters at 1200px and up

10px default gutters

SCSS:

.example-grid-3 {
	@include column-respond((
		0px : 2, // Setting 0px breakpoint is only necessary if number of columns > 1
		480px : 3,
		600px : 4,
		768px : 6,
		1200px : 8,
		gutter : 10px
	));
	
	.grid-col {
		background-color: $light-gray;
		border: 1px solid $dark-gray;
	}
}

Compiled CSS:

.example-grid-3 .grid-col {
  position: relative;
  margin-left: 0; }
  @media only screen and (min-width: 0px) and (max-width: 479px) {
    .example-grid-3 .grid-col {
      width: calc( (99.999% - 10px) / 2);
      margin-left: 10px; }
      .example-grid-3 .grid-col:nth-child(2n+1) {
        clear: both;
        margin-left: 0; } }
  @media only screen and (min-width: 480px) and (max-width: 599px) {
    .example-grid-3 .grid-col {
      width: calc( (99.999% - 20px) / 3);
      margin-left: 10px; }
      .example-grid-3 .grid-col:nth-child(3n+1) {
        clear: both;
        margin-left: 0; } }
  @media only screen and (min-width: 600px) and (max-width: 767px) {
    .example-grid-3 .grid-col {
      width: calc( (99.999% - 30px) / 4);
      margin-left: 10px; }
      .example-grid-3 .grid-col:nth-child(4n+1) {
        clear: both;
        margin-left: 0; } }
  @media only screen and (min-width: 768px) and (max-width: 1199px) {
    .example-grid-3 .grid-col {
      width: calc( (99.999% - 50px) / 6);
      margin-left: 10px; }
      .example-grid-3 .grid-col:nth-child(6n+1) {
        clear: both;
        margin-left: 0; } }
  @media only screen and (min-width: 1200px) {
    .example-grid-3 .grid-col {
      width: calc( (99.999% - 70px) / 8);
      margin-left: 10px; }
      .example-grid-3 .grid-col:nth-child(8n+1) {
        clear: both;
        margin-left: 0; } }

.example-grid-3 .grid-col {
  background-color: #EBEBEB;
  border: 1px solid #aaa; }

HTML:

<div class="example-grid-3 responsive-grid">
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 1</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 2</p>
 	</div>
	<div class="grid-col">
		<p class="alt-p">This column is intentionally longer...</p>
		<p class="style-spec">Column 3</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 4</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 5</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 6</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 7</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 8</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 9</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 10</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 11</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 12</p>
	</div>
</div>

RESULT:

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 1

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 2

This column is intentionally longer to show that the grid is height-adjustable. Note, however, that the actual block heights of the other tiles in this row do not actually change, as evidenced by the background-color on these tiles.

Column 3

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 4

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 5

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 6

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 7

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 8

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 9

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 10

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 11

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 12

Example showing different gutter values per breakpoint:

2 columns below 480px (overrides the mobile-first default of 1 column by setting a 0px breakpoint... see below)

3 columns between 480px and 600px

4 columns with 5% gutters between 600px and 768px

6 columns with 1px gutters between 768px and 900px

7 columns with default gutters between 900px and 1200px

8 columns with 2em gutters at 1200px and up

10px default gutters

SCSS:

.example-grid-4 {
	background-color: $dark-gray;
	padding: 3px;
	box-sizing: border-box;
	
	@include column-respond((
		0px : 2,
		480px : 3,
		600px : (
			columns : 4,
			gutter : 5%
		),
		768px : (
 			columns : 6,
			gutter : 1px
		),
		900px : 7,
		1200px : (
			columns : 8,
			gutter : 2em
		),
		gutter : 10px
	));
	
	.grid-col {
		background-color: $white;
		margin-bottom: 3px;
	}
}

Compiled CSS:

.example-grid-4 {
  background-color: #aaa;
  padding: 3px;
  box-sizing: border-box; }
  .example-grid-4 .grid-col {
    position: relative;
    margin-left: 0; }
    @media only screen and (min-width: 0px) and (max-width: 479px) {
      .example-grid-4 .grid-col {
        width: calc( (99.999% - 10px) / 2);
        margin-left: 10px; }
        .example-grid-4 .grid-col:nth-child(2n+1) {
          clear: both;
          margin-left: 0; } }
    @media only screen and (min-width: 480px) and (max-width: 599px) {
      .example-grid-4 .grid-col {
        width: calc( (99.999% - 20px) / 3);
        margin-left: 10px; }
        .example-grid-4 .grid-col:nth-child(3n+1) {
          clear: both;
          margin-left: 0; } }
    @media only screen and (min-width: 600px) and (max-width: 767px) {
      .example-grid-4 .grid-col {
        width: 21.25%;
        margin-left: 5%; }
        .example-grid-4 .grid-col:nth-child(4n+1) {
          clear: both;
          margin-left: 0; } }
    @media only screen and (min-width: 768px) and (max-width: 899px) {
      .example-grid-4 .grid-col {
        width: calc( (99.999% - 5px) / 6);
        margin-left: 1px; }
        .example-grid-4 .grid-col:nth-child(6n+1) {
          clear: both;
          margin-left: 0; } }
    @media only screen and (min-width: 900px) and (max-width: 1199px) {
      .example-grid-4 .grid-col {
        width: calc( (99.999% - 60px) / 7);
        margin-left: 10px; }
        .example-grid-4 .grid-col:nth-child(7n+1) {
          clear: both;
          margin-left: 0; } }
    @media only screen and (min-width: 1200px) {
      .example-grid-4 .grid-col {
        width: calc( (99.999% - 14em) / 8);
        margin-left: 2em; }
        .example-grid-4 .grid-col:nth-child(8n+1) {
          clear: both;
          margin-left: 0; } }

  .example-grid-4 .grid-col {
    background-color: #fff;
    margin-bottom: 3px; }

HTML:

<div class="example-grid-4 responsive-grid">
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 1</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 2</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 3</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 4</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 5</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 6</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 7</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 8</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 9</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 10</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 11</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 12</p>
	</div>
</div>

RESULT:

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 1

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 2

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 3

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 4

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 5

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 6

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 7

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 8

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 9

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 10

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 11

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 12

Example with added Column Dividers and Row Dividers:

2 columns below 480px (overrides the mobile-first default of 1 column by setting a 0px breakpoint... see below)

3 columns between 480px and 600px

4 columns between 600px and 768px

6 columns at 768px and up

10px default gutters

2px wide column dividers (auto-centered between columns)

1px wide (default) row dividers (auto-centered across full grid width)

SCSS:

.example-grid-5 {
	@include column-respond((
		0px : 2,
		480px : 3,
		600px : 4,
		768px : 6,
		gutter : 10px,
		col-divider : ( // auto-centered. do not add left/right positioning
			width: 2px,
			height: 100%,
			background-color: $sangria
		),
		row-divider : ( // defaults to 100% of the full grid width
			height: 1px,
			top: -3px,
			background-color: $cerulean
		)
	));
	
	.grid-col {
		padding-bottom: 6px;
	}
}

Compiled CSS:

.example-grid-5 .grid-col {
  position: relative;
  margin-left: 0; }
  .example-grid-5 .grid-col::after {
    content: "";
    position: absolute;
    display: block;
    clear: none;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #990000;
    left: calc( (10px + 2px) / -2); }
  @media only screen and (min-width: 0px) and (max-width: 479px) {
    .example-grid-5 .grid-col {
      width: calc( (99.999% - 10px) / 2);
      margin-left: 10px; }
      .example-grid-5 .grid-col:nth-child(2n+1) {
        clear: both;
        margin-left: 0; }
        .example-grid-5 .grid-col:nth-child(2n+1)::after {
          content: none; }
         .example-grid-5 .grid-col:nth-child(2n+1)::before {
          content: "";
          position: absolute;
          display: block;
          height: 1px;
          z-index: 1;
          background-color: #EBEBEB;
          top: -3px;
          width: calc( 200% + 10px);
          left: initial; } }
  @media only screen and (min-width: 480px) and (max-width: 599px) {
    .example-grid-5 .grid-col {
      width: calc( (99.999% - 20px) / 3);
      margin-left: 10px; }
      .example-grid-5 .grid-col:nth-child(3n+1) {
        clear: both;
        margin-left: 0; }
        .example-grid-5 .grid-col:nth-child(3n+1)::after {
          content: none; }
        .example-grid-5 .grid-col:nth-child(3n+1)::before {
          content: "";
          position: absolute;
          display: block;
          height: 1px;
          z-index: 1;
          background-color: #EBEBEB;
          top: -3px;
          width: calc( 300% + 20px);
          left: initial; } }
  @media only screen and (min-width: 600px) and (max-width: 767px) {
    .example-grid-5 .grid-col {
      width: calc( (99.999% - 30px) / 4);
      margin-left: 10px; }
      .example-grid-5 .grid-col:nth-child(4n+1) {
        clear: both;
        margin-left: 0; }
        .example-grid-5 .grid-col:nth-child(4n+1)::after {
          content: none; }
        .example-grid-5 .grid-col:nth-child(4n+1)::before {
          content: "";
          position: absolute;
          display: block;
          height: 1px;
          z-index: 1;
          background-color: #EBEBEB;
          top: -3px;
          width: calc( 400% + 30px);
          left: initial; } }
  @media only screen and (min-width: 768px) {
    .example-grid-5 .grid-col {
      width: calc( (99.999% - 50px) / 6);
      margin-left: 10px; }
      .example-grid-5 .grid-col:nth-child(6n+1) {
        clear: both;
        margin-left: 0; }
        .example-grid-5 .grid-col:nth-child(6n+1)::after {
          content: none; }
        .example-grid-5 .grid-col:nth-child(6n+1)::before {
          content: "";
          position: absolute;
          display: block;
          height: 1px;
          z-index: 1;
          background-color: #EBEBEB;
          top: -3px;
          width: calc( 600% + 50px);
          left: initial; } }
  .example-grid-5 .grid-col:first-child::before {
    content: none; }

.example-grid-5 .grid-col {
  padding-bottom: 6px; }

HTML:

<div class="example-grid-5 responsive-grid">
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 1</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 2</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 3</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 4</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 5</p>
	</div>
 	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 6</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 7</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 8</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 9</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 10</p>
	</div>
</div>

RESULT:

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 1

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 2

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 3

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 4

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 5

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 6

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 7

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 8

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 9

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 10

Example with the last row centered:

Note: This option has the potential to create a lot of extra CSS bloat as it needs to account for each possibile amount of tiles in the last row. So, please use sparingly.

2 columns below 480px

3 columns between 480px and 600px

4 columns between 600px and 768px

6 columns between 768px and 1180px

8 columns at 1180px and up

10px default gutters

2px wide column dividers

1px wide row dividers

Last row is centered

SCSS:

.example-grid-6 {
	@include column-respond((
		0px : 2,
		480px : 3,
		600px : 4,
		768px : 6,
		1180px : 8,
		gutter : 10px,
		col-divider : (
			width: 2px,
			height: 100%,
			background-color: $light-gray
		),
		row-divider : (
			height: 1px,
			top: -1em,
			background-color: $light-gray
		),
		center-last-row: true
	));
	
	.grid-col {
		margin-bottom: 2em;
	}
}

Compiled CSS:

.example-grid-6 .grid-col {
  position: relative;
  margin-left: 0; }
  .example-grid-6 .grid-col::after {
    content: "";
    position: absolute;
    display: block;
    clear: none;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #EBEBEB;
    left: calc( (10px + 1px) / -2); }
  @media only screen and (min-width: 0px) and (max-width: 479px) {
    .example-grid-6 .grid-col {
      width: calc( (99.999% - 10px) / 2);
      margin-left: 10px; }
      .example-grid-6 .grid-col:nth-child(2n+1) {
        clear: both;
        margin-left: 0; }
        .example-grid-6 .grid-col:nth-child(2n+1)::after {
          content: none; }
        .example-grid-6 .grid-col:nth-child(2n+1)::before {
          content: "";
          position: absolute;
          display: block;
          height: 1px;
          z-index: 1;
          background-color: #EBEBEB;
          top: -1em;
          width: calc( 200% + 10px);
          left: initial; }
      .example-grid-6 .grid-col:nth-child(2n+1):nth-last-child(1) {
        margin-left: calc((99.999% - 10px) * 0.25 + 5px); }
        .example-grid-6 .grid-col:nth-child(2n+1):nth-last-child(1)::before {
          margin-left: calc(-1 * (50% + 5px)); } }
  @media only screen and (min-width: 480px) and (max-width: 599px) {
    .example-grid-6 .grid-col {
      width: calc( (99.999% - 20px) / 3);
      margin-left: 10px; }
      .example-grid-6 .grid-col:nth-child(3n+1) {
        clear: both;
        margin-left: 0; }
        .example-grid-6 .grid-col:nth-child(3n+1)::after {
          content: none; }
        .example-grid-6 .grid-col:nth-child(3n+1)::before {
          content: "";
          position: absolute;
          display: block;
          height: 1px;
          z-index: 1;
          background-color: #EBEBEB;
          top: -1em;
          width: calc( 300% + 20px);
          left: initial; }
      .example-grid-6 .grid-col:nth-child(3n+1):nth-last-child(1) {
        margin-left: calc((99.999% - 20px) * 0.33333 + 10px); }
        .example-grid-6 .grid-col:nth-child(3n+1):nth-last-child(1)::before {
          margin-left: calc(-1 * (100% + 10px)); }
      .example-grid-6 .grid-col:nth-child(3n+1):nth-last-child(2) {
        margin-left: calc((99.999% - 20px) * 0.16667 + 5px); }
        .example-grid-6 .grid-col:nth-child(3n+1):nth-last-child(2)::before {
          margin-left: calc(-1 * (50% + 5px)); } }
  @media only screen and (min-width: 600px) and (max-width: 767px) {
    .example-grid-6 .grid-col {
      width: calc( (99.999% - 30px) / 4);
      margin-left: 10px; }
      .example-grid-6 .grid-col:nth-child(4n+1) {
        clear: both;
        margin-left: 0; }
        .example-grid-6 .grid-col:nth-child(4n+1)::after {
          content: none; }
        .example-grid-6 .grid-col:nth-child(4n+1)::before {
          content: "";
          position: absolute;
          display: block;
          height: 1px;
          z-index: 1;
          background-color: #EBEBEB;
          top: -1em;
          width: calc( 400% + 30px);
          left: initial; }
      .example-grid-6 .grid-col:nth-child(4n+1):nth-last-child(1) {
        margin-left: calc((99.999% - 30px) * 0.375 + 15px); }
        .example-grid-6 .grid-col:nth-child(4n+1):nth-last-child(1)::before {
          margin-left: calc(-1 * (150% + 15px)); }
      .example-grid-6 .grid-col:nth-child(4n+1):nth-last-child(2) {
        margin-left: calc((99.999% - 30px) * 0.25 + 10px); }
        .example-grid-6 .grid-col:nth-child(4n+1):nth-last-child(2)::before {
          margin-left: calc(-1 * (100% + 10px)); }
      .example-grid-6 .grid-col:nth-child(4n+1):nth-last-child(3) {
        margin-left: calc((99.999% - 30px) * 0.125 + 5px); }
        .example-grid-6 .grid-col:nth-child(4n+1):nth-last-child(3)::before {
          margin-left: calc(-1 * (50% + 5px)); } }
  @media only screen and (min-width: 768px) and (max-width: 1179px) {
    .example-grid-6 .grid-col {
      width: calc( (99.999% - 50px) / 6);
      margin-left: 10px; }
      .example-grid-6 .grid-col:nth-child(6n+1) {
        clear: both;
        margin-left: 0; }
        .example-grid-6 .grid-col:nth-child(6n+1)::after {
          content: none; }
        .example-grid-6 .grid-col:nth-child(6n+1)::before {
          content: "";
          position: absolute;
          display: block;
          height: 1px;
          z-index: 1;
          background-color: #EBEBEB;
          top: -1em;
          width: calc( 600% + 50px);
          left: initial; }
      .example-grid-6 .grid-col:nth-child(6n+1):nth-last-child(1) {
        margin-left: calc((99.999% - 50px) * 0.41667 + 25px); }
        .example-grid-6 .grid-col:nth-child(6n+1):nth-last-child(1)::before {
          margin-left: calc(-1 * (250% + 25px)); }
      .example-grid-6 .grid-col:nth-child(6n+1):nth-last-child(2) {
        margin-left: calc((99.999% - 50px) * 0.33333 + 20px); }
        .example-grid-6 .grid-col:nth-child(6n+1):nth-last-child(2)::before {
          margin-left: calc(-1 * (200% + 20px)); }
      .example-grid-6 .grid-col:nth-child(6n+1):nth-last-child(3) {
        margin-left: calc((99.999% - 50px) * 0.25 + 15px); }
        .example-grid-6 .grid-col:nth-child(6n+1):nth-last-child(3)::before {
          margin-left: calc(-1 * (150% + 15px)); }
      .example-grid-6 .grid-col:nth-child(6n+1):nth-last-child(4) {
        margin-left: calc((99.999% - 50px) * 0.16667 + 10px); }
        .example-grid-6 .grid-col:nth-child(6n+1):nth-last-child(4)::before {
          margin-left: calc(-1 * (100% + 10px)); }
      .example-grid-6 .grid-col:nth-child(6n+1):nth-last-child(5) {
        margin-left: calc((99.999% - 50px) * 0.08333 + 5px); }
        .example-grid-6 .grid-col:nth-child(6n+1):nth-last-child(5)::before {
          margin-left: calc(-1 * (50% + 5px)); } }
  @media only screen and (min-width: 1180px) {
    .example-grid-6 .grid-col {
      width: calc( (99.999% - 70px) / 8);
      margin-left: 10px; }
      .example-grid-6 .grid-col:nth-child(8n+1) {
        clear: both;
        margin-left: 0; }
        .example-grid-6 .grid-col:nth-child(8n+1)::after {
          content: none; }
        .example-grid-6 .grid-col:nth-child(8n+1)::before {
          content: "";
          position: absolute;
          display: block;
          height: 1px;
          z-index: 1;
          background-color: #EBEBEB;
          top: -1em;
          width: calc( 800% + 70px);
          left: initial; }
      .example-grid-6 .grid-col:nth-child(8n+1):nth-last-child(1) {
        margin-left: calc((99.999% - 70px) * 0.4375 + 35px); }
        .example-grid-6 .grid-col:nth-child(8n+1):nth-last-child(1)::before {
          margin-left: calc(-1 * (350% + 35px)); }
      .example-grid-6 .grid-col:nth-child(8n+1):nth-last-child(2) {
        margin-left: calc((99.999% - 70px) * 0.375 + 30px); }
        .example-grid-6 .grid-col:nth-child(8n+1):nth-last-child(2)::before {
          margin-left: calc(-1 * (300% + 30px)); }
      .example-grid-6 .grid-col:nth-child(8n+1):nth-last-child(3) {
        margin-left: calc((99.999% - 70px) * 0.3125 + 25px); }
        .example-grid-6 .grid-col:nth-child(8n+1):nth-last-child(3)::before {
          margin-left: calc(-1 * (250% + 25px)); }
      .example-grid-6 .grid-col:nth-child(8n+1):nth-last-child(4) {
        margin-left: calc((99.999% - 70px) * 0.25 + 20px); }
        .example-grid-6 .grid-col:nth-child(8n+1):nth-last-child(4)::before {
          margin-left: calc(-1 * (200% + 20px)); }
      .example-grid-6 .grid-col:nth-child(8n+1):nth-last-child(5) {
        margin-left: calc((99.999% - 70px) * 0.1875 + 15px); }
        .example-grid-6 .grid-col:nth-child(8n+1):nth-last-child(5)::before {
          margin-left: calc(-1 * (150% + 15px)); }
      .example-grid-6 .grid-col:nth-child(8n+1):nth-last-child(6) {
        margin-left: calc((99.999% - 70px) * 0.125 + 10px); }
        .example-grid-6 .grid-col:nth-child(8n+1):nth-last-child(6)::before {
          margin-left: calc(-1 * (100% + 10px)); }
      .example-grid-6 .grid-col:nth-child(8n+1):nth-last-child(7) {
        margin-left: calc((99.999% - 70px) * 0.0625 + 5px); }
        .example-grid-6 .grid-col:nth-child(8n+1):nth-last-child(7)::before {
          margin-left: calc(-1 * (50% + 5px)); } }
  .example-grid-6 .grid-col:first-child::before {
    content: none; }

.example-grid-6 .grid-col {
  margin-bottom: 2em; }

HTML:

<div class="example-grid-6 responsive-grid">
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 1</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 2</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 3</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 4</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 5</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 6</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 7</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 8</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 9</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 10</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 11</p>
	</div>
</div>

RESULT:

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 1

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 2

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 3

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 4

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 5

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 6

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 7

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 8

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 9

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 10

Lorem ipsum dolor sit amet. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis.

Column 11

Example of a colspan effect:

1 column below 600px (1 column is the mobile-first default)

3 columns between 600px and 768px

4 columns width at 768px and up

Note: this requires an extra blank div in markup.

SCSS:

.example-grid-7 {
	@include column-respond((
		600px : (
			columns : 3,
			gutter : 2px
		),
		768px : (
			columns : 4,
			gutter : 1em
		)
	));
	
	// HACK to create a colspan effect. Not really recommended, but somewhat working.
	.grid-col:nth-child(2) {
		p {
			width: 200%;
			max-width: none;
		}
	}
	.grid-col:nth-child(3) {
		padding: 1px; //somehow this is needed to give the blank column dimension
	}
}

Compiled CSS:

.example-grid-7 .grid-col {
  position: relative;
  margin-left: 0; }
  @media only screen and (min-width: 600px) and (max-width: 767px) {
    .example-grid-7 .grid-col {
      width: calc( (99.999% - 4px) / 3);
      margin-left: 2px; }
      .example-grid-7 .grid-col:nth-child(3n+1) {
        clear: both;
        margin-left: 0; } }
  @media only screen and (min-width: 768px) {
    .example-grid-7 .grid-col {
      width: calc( (99.999% - 3em) / 4);
      margin-left: 1em; }
      .example-grid-7 .grid-col:nth-child(4n+1) {
        clear: both;
        margin-left: 0; } }

.example-grid-7 .grid-col:nth-child(2) p {
  width: 200%;
  max-width: none; }

.example-grid-7 .grid-col:nth-child(3) {
  padding: 1px; }

HTML:

<div class="example-grid-7 responsive-grid">
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 1</p>
	</div>
	<div class="grid-col">
		<p class="alt-p"><b>This column spans 2 column widths...</b></p>
		<p class="style-spec">Column 2</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 3</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 4</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 5</p>
	</div>
	<div class="grid-col">
		<p class="alt-p">Lorem ipsum...</p>
		<p class="style-spec">Column 6</p>
	</div>
</div>

RESULT:

Column 1

This column spans 2 column widths. This is done by setting a style of width: 200%; on the inner contents of the <div class="grid-col">, and inserting a blank column immediately after (see markup). When using this method, it might be a bad idea to configure a breakpoint with some number of columns such that a "row break" is expected in the middle of this colspan. Notice that this particular grid is not configured to ever be 2 columns across for this reason. However, it still defaults to 1 column (100% width) below the smallest breakpoint set... you can see how the 200% width on the inner <p> content makes this single column problematic. This is on the TODO list to fix. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Etiam quis erat tincidunt, posuere mauris ut, bibendum massa. Nullam rhoncus, velit vitae posuere dapibus, lectus lorem suscipit ligula, id convallis ex justo quis urna.

Column 2

Column 4

Column 5

Column 6