Pure CSS grid

grid-yui.less

/**
 * YUI Grids
 * g - row, c - column
*/

/*responsive*/
.am-g {
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  word-spacing: -0.43em;
  /*
  Sets the font stack to fonts known to work properly with the above letter
  and word spacings. See: https://github.com/yui/pure/issues/41/

  The following font stack makes Pure Grids work on all known environments.

  * FreeSans: Ships with many Linux distros, including Ubuntu

  * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
    Arial to get picked up by the browser, even though neither is available
    in Chrome OS.

  * Droid Sans: Ships with all versions of Android.

  * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
  */
  font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;

  /*
  Use flexbox when possible to avoid `letter-spacing` side-effects.

  NOTE: Firefox (as of 25) does not currently support flex-wrap, so the
  `-moz-` prefix version is omitted.
  */

  display: -webkit-flex;
  -webkit-flex-flow: row wrap;

  /* IE10 uses display: flexbox */
  display: -ms-flexbox;
  -ms-flex-flow: row wrap;
}


.opera-only :-o-prefocus,
.am-g {
  word-spacing: -0.43em;
}

/*
Resets the font family back to the OS/browser's default sans-serif font,
this the same font stack that Normalize.css sets for the `body`.
*/
.am-g [class *= "am-c"] {
  font-family: sans-serif;
}

.am-g img {
  max-width: 100%;
}

.am-c {
  display: inline-block;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  text-rendering: auto;
}


.am-c-1,.am-c-1-2,.am-c-1-3,.am-c-2-3,.am-c-1-4,.am-c-3-4,.am-c-1-5,.am-c-2-5,.am-c-3-5,.am-c-4-5,.am-c-1-6,.am-c-5-6,.am-c-1-7,.am-c-2-7,.am-c-3-7,.am-c-4-7,.am-c-5-7,.am-c-6-7,.am-c-1-8,.am-c-3-8,.am-c-5-8,.am-c-7-8,.am-c-1-9,.am-c-2-9,.am-c-4-9,.am-c-5-9,.am-c-6-9,.am-c-7-9,.am-c-8-9,.am-c-1-10,.am-c-3-10,.am-c-7-10,.am-c-9-10,.am-c-1-11,.am-c-2-11,.am-c-3-11,.am-c-4-11,.am-c-5-11,.am-c-6-11,.am-c-7-11,.am-c-8-11,.am-c-9-11,.am-c-10-11,.am-c-1-12,.am-c-5-12,.am-c-7-12,.am-c-9-12,.am-c-11-12 {
  display: inline-block;
  zoom: 1; *display: inline;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  text-rendering: auto;
}

.am-c-1 {
  display:block;
}

.am-c-1-2 {
  width: 50%;
}

.am-offset-1-2 {
  margin-left: 50%;
}

.am-c-1-3 {
  width: 33.33333%;
}

.am-offset-1-3 {
  margin-left: 33.33333%;
}

.am-c-2-3 {
  width: 66.66667%;
}

.am-offset-2-3 {
  margin-left: 66.66667%;
}

.am-c-1-4 {
  width: 25%;
}

.am-offset-1-4 {
  margin-left: 25%;
}

.am-c-3-4 {
  width: 75%;
}

.am-offset-3-4 {
  margin-left: 75%;
}

.am-c-1-5 {
  width: 20%;
}

.am-offset-1-5 {
  margin-left: 20%;
}

.am-c-2-5 {
  width: 40%;
}

.am-offset-2-5 {
  margin-left: 40%;
}

.am-c-3-5 {
  width: 60%;
}

.am-offset-3-5 {
  margin-left: 60%;
}

.am-c-4-5 {
  width: 80%;
}

.am-offset-4-5 {
  margin-left: 80%;
}

.am-c-1-6 {
  width: 16.66667%;
}

.am-offset-1-6 {
  margin-left: 16.66667%;
}

.am-c-5-6 {
  width: 83.33333%;
}

.am-offset-5-6 {
  margin-left: 83.33333%;
}

.am-c-1-7 {
  width: 14.28571%;
}

.am-offset-1-7 {
  margin-left: 14.28571%;
}

.am-c-2-7 {
  width: 28.57143%;
}

.am-offset-2-7 {
  margin-left: 28.57143%;
}

.am-c-3-7 {
  width: 42.85714%;
}

.am-offset-3-7 {
  margin-left: 42.85714%;
}

.am-c-4-7 {
  width: 57.14286%;
}

.am-offset-4-7 {
  margin-left: 57.14286%;
}

.am-c-5-7 {
  width: 71.42857%;
}

.am-offset-5-7 {
  margin-left: 71.42857%;
}

.am-c-6-7 {
  width: 85.71429%;
}

.am-offset-6-7 {
  margin-left: 85.71429%;
}

.am-c-1-8 {
  width: 12.5%;
}

.am-offset-1-8 {
  margin-left: 12.5%;
}

.am-c-3-8 {
  width: 37.5%;
}

.am-offset-3-8 {
  margin-left: 37.5%;
}

.am-c-5-8 {
  width: 62.5%;
}

.am-offset-5-8 {
  margin-left: 62.5%;
}

.am-c-7-8 {
  width: 87.5%;
}

.am-offset-7-8 {
  margin-left: 87.5%;
}

.am-c-1-9 {
  width: 11.11111%;
}

.am-offset-1-9 {
  margin-left: 11.11111%;
}

.am-c-2-9 {
  width: 22.22222%;
}

.am-offset-2-9 {
  margin-left: 22.22222%;
}

.am-c-4-9 {
  width: 44.44444%;
}

.am-offset-4-9 {
  margin-left: 44.44444%;
}

.am-c-5-9 {
  width: 55.55556%;
}

.am-offset-5-9 {
  margin-left: 55.55556%;
}

.am-c-6-9 {
  width: 66.66667%;
}

.am-offset-6-9 {
  margin-left: 66.66667%;
}

.am-c-7-9 {
  width: 77.77778%;
}

.am-offset-7-9 {
  margin-left: 77.77778%;
}

.am-c-8-9 {
  width: 88.88889%;
}

.am-offset-8-9 {
  margin-left: 88.88889%;
}

.am-c-1-10 {
  width: 10%;
}

.am-offset-1-10 {
  margin-left: 10%;
}

.am-c-3-10 {
  width: 30%;
}

.am-offset-3-10 {
  margin-left: 30%;
}

.am-c-7-10 {
  width: 70%;
}

.am-offset-7-10 {
  margin-left: 70%;
}

.am-c-9-10 {
  width: 90%;
}

.am-offset-9-10 {
  margin-left: 90%;
}

.am-c-1-11 {
  width: 9.09091%;
}

.am-offset-1-11 {
  margin-left: 9.09091%;
}

.am-c-2-11 {
  width: 18.18182%;
}

.am-offset-2-11 {
  margin-left: 18.18182%;
}

.am-c-3-11 {
  width: 27.27273%;
}

.am-offset-3-11 {
  margin-left: 27.27273%;
}

.am-c-4-11 {
  width: 36.36364%;
}

.am-offset-4-11 {
  margin-left: 36.36364%;
}

.am-c-5-11 {
  width: 45.45455%;
}

.am-offset-5-11 {
  margin-left: 45.45455%;
}

.am-c-6-11 {
  width: 54.54545%;
}

.am-offset-6-11 {
  margin-left: 54.54545%;
}

.am-c-7-11 {
  width: 63.63636%;
}

.am-offset-7-11 {
  margin-left: 63.63636%;
}

.am-c-8-11 {
  width: 72.72727%;
}

.am-offset-8-11 {
  margin-left: 72.72727%;
}

.am-c-9-11 {
  width: 81.81818%;
}

.am-offset-9-11 {
  margin-left: 81.81818%;
}

.am-c-10-11 {
  width: 90.90909%;
}

.am-offset-10-11 {
  margin-left: 90.90909%;
}

.am-c-1-12 {
  width: 8.33333%;
}

.am-offset-1-12 {
  margin-left: 8.33333%;
}

.am-c-5-12 {
  width: 41.66667%;
}

.am-offset-5-12 {
  margin-left: 41.66667%;
}

.am-c-7-12 {
  width: 58.33333%;
}

.am-offset-7-12 {
  margin-left: 58.33333%;
}

.am-c-9-12 {
  width: 75%;
}

.am-offset-9-12 {
  margin-left: 75%;
}

.am-c-11-12 {
  width: 91.66667%;
}

.am-offset-11-12 {
  margin-left: 91.66667%;
}



@media (min-width:980px) {
  .am-visible-phone     { display: none; }
  .am-visible-tablet    { display: none; }
  .am-visible-desktop   { }
  .am-hidden-phone      { }
  .am-hidden-tablet     { }
  .am-hidden-desktop    { display: none; }
}


@media (max-width:480px) {
  .am-g-r > [class ^= "am-c"] {
    width:100%;
  }
}


@media (max-width:767px) {

  .am-g-r > [class ^= "am-c"] {
    width:100%;
  }
  .am-visible-phone     { }
  .am-hidden-phone      { display: none; }
  .am-hidden-desktop    { }
  .am-visible-desktop   { display: none; }
}

@media (min-width:768px) and (max-width:979px) {
  .am-visible-tablet    {}
  .am-hidden-tablet     { display: none; }
  .am-hidden-desktop    {}
  .am-visible-desktop   { display: none; }
}

481 / 473 两行的选择应该为 .am-g