grid.css

/*!
 * Flynn Grid Structure
 * http://daviddarnes.github.io/flynn
 */
.container {
  max-width: 1200px;
  clear: both;
  float: none;
  margin: 0 auto; }

.row {
  margin-left: -1.333%;
  clear: both;
  zoom: 1; }
  .row:after, .row:before {
    display: table;
    line-height: 0;
    content: "";
    clear: both; }

[class*="span-"] {
  margin-left: 1.333%;
  float: left;
  max-width: 100%; }

.span-1 {
  width: 7%; }

.span-2 {
  width: 15.333%; }

.span-3 {
  width: 23.666%; }

.span-4 {
  width: 31.999%; }

.span-5 {
  width: 40.332%; }

.span-6 {
  width: 48.665%; }

.span-7 {
  width: 56.998%; }

.span-8 {
  width: 65.331%; }

.span-9 {
  width: 73.664%; }

.span-10 {
  width: 81.997%; }

.span-11 {
  width: 90.33%; }

.span-12 {
  width: 98.663%; }

[class*="span-"].shift-1 {
  margin-left: 9.666%; }

[class*="span-"].shift-2 {
  margin-left: 17.999%; }

[class*="span-"].shift-3 {
  margin-left: 26.332%; }

[class*="span-"].shift-4 {
  margin-left: 34.665%; }

[class*="span-"].shift-5 {
  margin-left: 42.998%; }

[class*="span-"].shift-6 {
  margin-left: 51.331%; }

[class*="span-"].shift-7 {
  margin-left: 59.664%; }

[class*="span-"].shift-8 {
  margin-left: 67.997%; }

[class*="span-"].shift-9 {
  margin-left: 76.33%; }

[class*="span-"].shift-10 {
  margin-left: 84.663%; }

[class*="span-"].shift-11 {
  margin-left: 92.996%; }

[class*="span-"], .container, .row {
  zoom: 1; }

img {
  max-width: 100%;
  height: auto; }

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

@media (max-width: 767px) {
  [class*="span-"] {
    margin-left: 0;
    width: 100%; }
    [class*="span-"][class*="shift-"] {
      margin-left: 0; }
  .row {
    margin: 0 1.333%; }
  .row .row {
    margin: 0; }
  .container {
    width: 100%; } }

@supports (display: grid) {
  .row {
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1.333%; }
    .row:after, .row:before {
      display: none; }
  [class*="span-"] {
    margin-left: 0;
    float: none;
    grid-column-end: span 12; }
  .span-1 {
    width: auto;
    grid-column-end: span 1; }
  .span-2 {
    width: auto;
    grid-column-end: span 2; }
  .span-3 {
    width: auto;
    grid-column-end: span 3; }
  .span-4 {
    width: auto;
    grid-column-end: span 4; }
  .span-5 {
    width: auto;
    grid-column-end: span 5; }
  .span-6 {
    width: auto;
    grid-column-end: span 6; }
  .span-7 {
    width: auto;
    grid-column-end: span 7; }
  .span-8 {
    width: auto;
    grid-column-end: span 8; }
  .span-9 {
    width: auto;
    grid-column-end: span 9; }
  .span-10 {
    width: auto;
    grid-column-end: span 10; }
  .span-11 {
    width: auto;
    grid-column-end: span 11; }
  .span-12 {
    width: auto;
    grid-column-end: span 12; }
  [class*="span-"].shift-1 {
    grid-column-start: 1; }
  [class*="span-"].shift-2 {
    grid-column-start: 2; }
  [class*="span-"].shift-3 {
    grid-column-start: 3; }
  [class*="span-"].shift-4 {
    grid-column-start: 4; }
  [class*="span-"].shift-5 {
    grid-column-start: 5; }
  [class*="span-"].shift-6 {
    grid-column-start: 6; }
  [class*="span-"].shift-7 {
    grid-column-start: 7; }
  [class*="span-"].shift-8 {
    grid-column-start: 8; }
  [class*="span-"].shift-9 {
    grid-column-start: 9; }
  [class*="span-"].shift-10 {
    grid-column-start: 10; }
  [class*="span-"].shift-11 {
    grid-column-start: 11; }
  @media (max-width: 767px) {
    .row {
      display: block; }
    [class*="span-"] {
      float: left;
      width: 100%; } } }