Generated by SassMeister.com: Susy Grid - 2 columns for tablet, 3 columns for laptop with gutter-position:after #susy #grid #sassmeister

README.md

##IMPORTANT: This example uses gutter-position:after

##Example: nth-of-type(an+b) nth-of-type(3n+1)

In that expression, the number b represents the ordinal position of the first element that we want to match, and the number a represents the ordinal number of every element we want to match after that. So our example expression, 3n+1 will match the first element, and every third element after that.

For IE8 see: http://stackoverflow.com/questions/8492121/ie8-nth-child-and-before

SassMeister-input-HTML.html

    <article id="usefulinfo">
      <section>
        <h2>Arrival Information</h2>
        <ul>
          <li><strong>Check-in:</strong> 3:00 PM</li>
          <li><strong>Check-out:</strong> 11:00 AM</li>
          <li><strong>Parking:</strong> Self-parking in the underground garage is ￡15 per day and valet-parking is ￡50 per day.</li>
          <li><strong>Airport Shuttle:</strong> Our complimentary airport shuttles leave every hour on the hour, and make trips to Heathrow and Gatwick airports.</li>
          <li><strong>Trains:</strong> The nearest Underground station is at Leicester Square.</li>
          <li><strong>Pet Policy:</strong> Pets of all sizes and types are allowed in designated pet rooms, and the specified common areas. Service animals are allowed everywhere.</li>
        </ul>
      </section>
      <section class="checklist">
        <h2>Services and Amenities</h2>
        <p>Our services and amenities are designed to make your travel easy, your stay comfortable, and your experience one-of-a-kind.</p>
        <ul>
          <li>Indoor pool</li>
          <li>24-hour fitness center</li>
          <li>Pet-friendly rooms  &amp; common areas</li>
        </ul>
      </section>
      <section class="checklist">
        <h2>Accessibility</h2>
        <p>We're committed to maintaining the same quality of service for every individual. We offer the following facilities for those with special needs:</p>
        <ul>
          <li>Grab bars on tub walls</li>
          <li>Shower chairs</li>
          <li>Hand held shower sprayers</li>
          <li>Higher toilets &amp; toilet modifiers</li>
          <li>Lower sink faucet handles</li>
          <li>Wheelchair clearance under sinks &amp; vanity</li>
          <li>Lower racks in closet</li>
          <li>TDD machines</li>
          <li>Telephone light signalers  &amp; smoke alarms</li>
          <li>Telephone amplification handsets</li>
          <li>Closed captioned television converters</li>
          <li>Vibrating alarm clocks</li>
          <li>Telephones with volume control</li>
        </ul>
      </section>
      <section>
        <h2>Arrival Information</h2>
        <ul>
          <li><strong>Check-in:</strong> 3:00 PM</li>
          <li><strong>Check-out:</strong> 11:00 AM</li>
          <li><strong>Parking:</strong> Self-parking in the underground garage is ￡15 per day and valet-parking is ￡50 per day.</li>
          <li><strong>Airport Shuttle:</strong> Our complimentary airport shuttles leave every hour on the hour, and make trips to Heathrow and Gatwick airports.</li>
          <li><strong>Trains:</strong> The nearest Underground station is at Leicester Square.</li>
          <li><strong>Pet Policy:</strong> Pets of all sizes and types are allowed in designated pet rooms, and the specified common areas. Service animals are allowed everywhere.</li>
        </ul>
      </section>
      <section class="checklist">
        <h2>Services and Amenities</h2>
        <p>Our services and amenities are designed to make your travel easy, your stay comfortable, and your experience one-of-a-kind.</p>
        <ul>
          <li>Indoor pool</li>
          <li>24-hour fitness center</li>
          <li>Massage therapy</li>
          <li>Full service spa</li>
          <li>In-room jacuzzi tubs</li>
          <li>Rooftop café  &amp; smoothie bar</li>
          <li>Coffee bar  &amp; pastry shop</li>
          <li>Traditional continental breakfast</li>
          <li>24-hour concierge service</li>
          <li>Business center</li>
          <li>Complimentary wireless service</li>
          <li>Laundry &amp; dry cleaning service</li>
          <li>Daily paper</li>
          <li>Certified "green" hotel</li>
          <li>Pet-friendly rooms  &amp; common areas</li>
        </ul>
      </section>
      <section class="checklist">
        <h2>Accessibility</h2>
        <p>We're committed to maintaining the same quality of service for every individual. We offer the following facilities for those with special needs:</p>
        <ul>
          <li>Grab bars on tub walls</li>
          <li>Shower chairs</li>
          <li>Hand held shower sprayers</li>
          <li>Higher toilets &amp; toilet modifiers</li>
          <li>Lower sink faucet handles</li>
          <li>Wheelchair clearance under sinks &amp; vanity</li>
          <li>Lower racks in closet</li>
          <li>TDD machines</li>
          <li>Telephone light signalers  &amp; smoke alarms</li>
          <li>Telephone amplification handsets</li>
          <li>Closed captioned television converters</li>
          <li>Vibrating alarm clocks</li>
          <li>Telephones with volume control</li>
        </ul>
      </section>
      <section>
        <h2>Arrival Information</h2>
        <ul>
          <li><strong>Check-in:</strong> 3:00 PM</li>
          <li><strong>Check-out:</strong> 11:00 AM</li>
          <li><strong>Parking:</strong> Self-parking in the underground garage is ￡15 per day and valet-parking is ￡50 per day.</li>
          <li><strong>Airport Shuttle:</strong> Our complimentary airport shuttles leave every hour on the hour, and make trips to Heathrow and Gatwick airports.</li>
          <li><strong>Trains:</strong> The nearest Underground station is at Leicester Square.</li>
          <li><strong>Pet Policy:</strong> Pets of all sizes and types are allowed in designated pet rooms, and the specified common areas. Service animals are allowed everywhere.</li>
        </ul>
      </section>
      <section class="checklist">
        <h2>Services and Amenities</h2>
        <p>Our services and amenities are designed to make your travel easy, your stay comfortable, and your experience one-of-a-kind.</p>
        <ul>
          <li>Indoor pool</li>
          <li>24-hour fitness center</li>
          <li>Massage therapy</li>
          <li>Full service spa</li>
          <li>In-room jacuzzi tubs</li>
          <li>Rooftop café  &amp; smoothie bar</li>
          <li>Coffee bar  &amp; pastry shop</li>
          <li>Traditional continental breakfast</li>
          <li>24-hour concierge service</li>
          <li>Business center</li>
          <li>Complimentary wireless service</li>
          <li>Laundry &amp; dry cleaning service</li>
          <li>Daily paper</li>
          <li>Certified "green" hotel</li>
          <li>Pet-friendly rooms  &amp; common areas</li>
        </ul>
      </section>
      <section class="checklist">
        <h2>Accessibility</h2>
        <p>We're committed to maintaining the same quality of service for every individual. We offer the following facilities for those with special needs:</p>
        <ul>
          <li>Grab bars on tub walls</li>
          <li>Shower chairs</li>
          <li>Hand held shower sprayers</li>
          <li>Higher toilets &amp; toilet modifiers</li>
          <li>Lower sink faucet handles</li>
          <li>Wheelchair clearance under sinks &amp; vanity</li>
          <li>Lower racks in closet</li>
          <li>TDD machines</li>
          <li>Telephone light signalers  &amp; smoke alarms</li>
          <li>Telephone amplification handsets</li>
          <li>Closed captioned television converters</li>
          <li>Vibrating alarm clocks</li>
          <li>Telephones with volume control</li>
        </ul>
      </section>
    </article>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Susy (v2.1.3)
// ----

@import "compass";
@import "susy";
@import "breakpoint";

@include border-box-sizing; //uses border box sizing like the old IE

$susy: (
  columns: 12,
  container: 60em,
  gutters: 1/4,
  gutter-position: after
);

$small: 650px;
$medium: 960px;

	#usefulinfo {
		@include clearfix;
		background: grey;

		section {
		  padding: 10px 20px;
		  margin-bottom: 30px;
			//@media (min-width: $small) and (max-width: $medium) {
			@include breakpoint($small $medium) {
			  background: SkyBlue;
				@include span(6 of 12);
			  /* gutter-position:after requires adding
			  last to the last column in each row */
			  &:nth-of-type(2n+2){
			    @include last;
			  }
				/* 2 columns, first clear 3rd <section>
				and then 5th, 7th etc. */
				&:nth-of-type(2n+3){
					clear: both;
				}

			}
			//@media (min-width: $medium) {
			@include breakpoint($medium) {
			  background: PaleGoldenRod;
				@include span(4 of 12);
			  /* gutter-position:after requires adding
			  last to the last column in each row */
			  &:nth-of-type(3n+3){
			    @include last;
			  }
			  /* 3 columns, first clear 4th <section>
				and then 7th, 10th etc. */
				&:nth-of-type(3n+4){
					clear: both;
				}
			}
		}
	}

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#usefulinfo {
  overflow: hidden;
  *zoom: 1;
  background: grey;
}
#usefulinfo section {
  padding: 10px 20px;
  margin-bottom: 30px;
}
@media (min-width: 650px) and (max-width: 960px) {
  #usefulinfo section {
    background: SkyBlue;
    width: 49.15254%;
    float: left;
    margin-right: 1.69492%;
    /* gutter-position: inside requires adding
    last to the last column in each row */
    /* 2 columns, first clear 3rd <section>
    and then 5th, 7th etc. */
  }
  #usefulinfo section:nth-of-type(2n+2) {
    float: right;
    margin-right: 0;
  }
  #usefulinfo section:nth-of-type(2n+3) {
    clear: both;
  }
}
@media (min-width: 960px) {
  #usefulinfo section {
    background: PaleGoldenRod;
    width: 32.20339%;
    float: left;
    margin-right: 1.69492%;
    /* gutter-position: inside requires adding
    last to the last column in each row */
  /* 3 columns, first clear 4th <section>
	and then 7th, 10th etc. */
  }
  #usefulinfo section:nth-of-type(3n+3) {
    float: right;
    margin-right: 0;
  }
  #usefulinfo section:nth-of-type(3n+4) {
    clear: both;
  }
}

SassMeister-rendered.html

    <article id="usefulinfo">
      <section>
        <h2>Arrival Information</h2>
        <ul>
          <li><strong>Check-in:</strong> 3:00 PM</li>
          <li><strong>Check-out:</strong> 11:00 AM</li>
          <li><strong>Parking:</strong> Self-parking in the underground garage is ￡15 per day and valet-parking is ￡50 per day.</li>
          <li><strong>Airport Shuttle:</strong> Our complimentary airport shuttles leave every hour on the hour, and make trips to Heathrow and Gatwick airports.</li>
          <li><strong>Trains:</strong> The nearest Underground station is at Leicester Square.</li>
          <li><strong>Pet Policy:</strong> Pets of all sizes and types are allowed in designated pet rooms, and the specified common areas. Service animals are allowed everywhere.</li>
        </ul>
      </section>
      <section class="checklist">
        <h2>Services and Amenities</h2>
        <p>Our services and amenities are designed to make your travel easy, your stay comfortable, and your experience one-of-a-kind.</p>
        <ul>
          <li>Indoor pool</li>
          <li>24-hour fitness center</li>
          <li>Pet-friendly rooms  &amp; common areas</li>
        </ul>
      </section>
      <section class="checklist">
        <h2>Accessibility</h2>
        <p>We're committed to maintaining the same quality of service for every individual. We offer the following facilities for those with special needs:</p>
        <ul>
          <li>Grab bars on tub walls</li>
          <li>Shower chairs</li>
          <li>Hand held shower sprayers</li>
          <li>Higher toilets &amp; toilet modifiers</li>
          <li>Lower sink faucet handles</li>
          <li>Wheelchair clearance under sinks &amp; vanity</li>
          <li>Lower racks in closet</li>
          <li>TDD machines</li>
          <li>Telephone light signalers  &amp; smoke alarms</li>
          <li>Telephone amplification handsets</li>
          <li>Closed captioned television converters</li>
          <li>Vibrating alarm clocks</li>
          <li>Telephones with volume control</li>
        </ul>
      </section>
      <section>
        <h2>Arrival Information</h2>
        <ul>
          <li><strong>Check-in:</strong> 3:00 PM</li>
          <li><strong>Check-out:</strong> 11:00 AM</li>
          <li><strong>Parking:</strong> Self-parking in the underground garage is ￡15 per day and valet-parking is ￡50 per day.</li>
          <li><strong>Airport Shuttle:</strong> Our complimentary airport shuttles leave every hour on the hour, and make trips to Heathrow and Gatwick airports.</li>
          <li><strong>Trains:</strong> The nearest Underground station is at Leicester Square.</li>
          <li><strong>Pet Policy:</strong> Pets of all sizes and types are allowed in designated pet rooms, and the specified common areas. Service animals are allowed everywhere.</li>
        </ul>
      </section>
      <section class="checklist">
        <h2>Services and Amenities</h2>
        <p>Our services and amenities are designed to make your travel easy, your stay comfortable, and your experience one-of-a-kind.</p>
        <ul>
          <li>Indoor pool</li>
          <li>24-hour fitness center</li>
          <li>Massage therapy</li>
          <li>Full service spa</li>
          <li>In-room jacuzzi tubs</li>
          <li>Rooftop café  &amp; smoothie bar</li>
          <li>Coffee bar  &amp; pastry shop</li>
          <li>Traditional continental breakfast</li>
          <li>24-hour concierge service</li>
          <li>Business center</li>
          <li>Complimentary wireless service</li>
          <li>Laundry &amp; dry cleaning service</li>
          <li>Daily paper</li>
          <li>Certified "green" hotel</li>
          <li>Pet-friendly rooms  &amp; common areas</li>
        </ul>
      </section>
      <section class="checklist">
        <h2>Accessibility</h2>
        <p>We're committed to maintaining the same quality of service for every individual. We offer the following facilities for those with special needs:</p>
        <ul>
          <li>Grab bars on tub walls</li>
          <li>Shower chairs</li>
          <li>Hand held shower sprayers</li>
          <li>Higher toilets &amp; toilet modifiers</li>
          <li>Lower sink faucet handles</li>
          <li>Wheelchair clearance under sinks &amp; vanity</li>
          <li>Lower racks in closet</li>
          <li>TDD machines</li>
          <li>Telephone light signalers  &amp; smoke alarms</li>
          <li>Telephone amplification handsets</li>
          <li>Closed captioned television converters</li>
          <li>Vibrating alarm clocks</li>
          <li>Telephones with volume control</li>
        </ul>
      </section>
      <section>
        <h2>Arrival Information</h2>
        <ul>
          <li><strong>Check-in:</strong> 3:00 PM</li>
          <li><strong>Check-out:</strong> 11:00 AM</li>
          <li><strong>Parking:</strong> Self-parking in the underground garage is ￡15 per day and valet-parking is ￡50 per day.</li>
          <li><strong>Airport Shuttle:</strong> Our complimentary airport shuttles leave every hour on the hour, and make trips to Heathrow and Gatwick airports.</li>
          <li><strong>Trains:</strong> The nearest Underground station is at Leicester Square.</li>
          <li><strong>Pet Policy:</strong> Pets of all sizes and types are allowed in designated pet rooms, and the specified common areas. Service animals are allowed everywhere.</li>
        </ul>
      </section>
      <section class="checklist">
        <h2>Services and Amenities</h2>
        <p>Our services and amenities are designed to make your travel easy, your stay comfortable, and your experience one-of-a-kind.</p>
        <ul>
          <li>Indoor pool</li>
          <li>24-hour fitness center</li>
          <li>Massage therapy</li>
          <li>Full service spa</li>
          <li>In-room jacuzzi tubs</li>
          <li>Rooftop café  &amp; smoothie bar</li>
          <li>Coffee bar  &amp; pastry shop</li>
          <li>Traditional continental breakfast</li>
          <li>24-hour concierge service</li>
          <li>Business center</li>
          <li>Complimentary wireless service</li>
          <li>Laundry &amp; dry cleaning service</li>
          <li>Daily paper</li>
          <li>Certified "green" hotel</li>
          <li>Pet-friendly rooms  &amp; common areas</li>
        </ul>
      </section>
      <section class="checklist">
        <h2>Accessibility</h2>
        <p>We're committed to maintaining the same quality of service for every individual. We offer the following facilities for those with special needs:</p>
        <ul>
          <li>Grab bars on tub walls</li>
          <li>Shower chairs</li>
          <li>Hand held shower sprayers</li>
          <li>Higher toilets &amp; toilet modifiers</li>
          <li>Lower sink faucet handles</li>
          <li>Wheelchair clearance under sinks &amp; vanity</li>
          <li>Lower racks in closet</li>
          <li>TDD machines</li>
          <li>Telephone light signalers  &amp; smoke alarms</li>
          <li>Telephone amplification handsets</li>
          <li>Closed captioned television converters</li>
          <li>Vibrating alarm clocks</li>
          <li>Telephones with volume control</li>
        </ul>
      </section>
    </article>