wriver4
11/23/2012 - 4:33 PM

A CodePen by Mark E. Carter. LESS Responsive Grid - Super simple responsive grid using LESS mixins and box-sizing.

A CodePen by Mark E. Carter. LESS Responsive Grid - Super simple responsive grid using LESS mixins and box-sizing.

index.haml
content_copyfile_download
.row#one
  .item
  .item
  .item
  .item
.row#two
  .item
  .item
  .item
.row#three
  .item
  .item
style.less
content_copyfile_download
/* RESPONSIVE COLUMNS MIXINS */
.row {
  &:before,
  &:after {
    content: " "; /* 1 */
    display: table; /* 2 */
  }

  &:after {
    clear: both;
  }
}

.column-float {
  float: left;
  box-sizing: border-box;
}

.column(@n) {
  width: 100% / @n;
  .column-float;
}

.column-span(@n, @span) {
  width: (100% / @n) * @span;
  .column-float;
}

/* EXAMPLE STYLES */
body {
  background: #222;
}

.row {
  width: 100%;
  max-width: 1080px;
  margin: 10px auto;
}

.item {
  height: 200px;
  border: 10px solid #222;
  
  #one & {
    .column(4); 
    background: #840;
  }
  
  #two & {
    .column(3);
    background: #048;
  }
  
  #three & {
    .column(2);
    background: #840;
  }
}

@media (min-width: 400px) and (max-width: 800px) {
  .item {
      
    #one & {
      .column(3);
    }
      
    #one &:first-child,
    #one &:last-child {
      .column-span(3, 2);    
    }
    
    #two & {
      .column(2);
    }
      
    #two &:first-child {
      .column(1);    
    }
    
    #three & {
      .column(1);
    }
  }
}

@media (max-width: 400px) {
  .item {
      
    #one & {
      .column(1);
    }
    
    #two & {
      .column(1);
    }
    
    #three & {
      .column(1);
    }
  }
}