Responsive Grid

In this example below you will see how to do a Responsive Grid with some HTML / CSS and Javascript

Simple implementation of grid's, without using !important, can be nested, with 4 breakpoints

Thumbnail
This awesome code was written by oieduardorabelo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright oieduardorabelo ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
  <div class="row">
    <div class="col-xs-4 col-sm-10 col-md-1 col-lg-9">
      Hello World
    </div>
    <div class="col-xs-6 col-sm-2 col-md-10 col-lg-1">
      Hellow World 2
    </div>
    <div class="col-xs-2 col-sm-12 col-md-1 col-lg-2">
      Hellow World 2
    </div>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/oieduardorabelo/responsive-grid-KwJEed */
    @cols: 12;
@gutter: 12px;
@sm-min: 640px;
@md-min: 960px;
@lg-min: 1280px;

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

.clearfix() {
  &:after {
    content: " ";
    clear: both;
    display: table;
  }
}

.container {
  .clearfix();
  margin-left: auto;
  margin-right: auto;
  padding-left: (@gutter / 2); 
  padding-right: (@gutter / 2);
}

.row {
  .clearfix();
  margin-left: (@gutter / -2);
  margin-right: (@gutter / -2);
}

.grid(@col, @class, @i: 1) when (@i =< @col) {
  .col-@{class}-@{i} {
    float: left;
    padding-left: (@gutter / 2); 
    padding-right: (@gutter / 2);
    position: relative;
    width: (@i * 100%) / @col;
  }

  .grid(@col, @class, (@i + 1));
}

.grid(@cols, xs);

@media all and (min-width: @sm-min) {
  .grid(@cols, sm);
}

@media all and (min-width: @md-min) {
  .grid(@cols, md);
}

@media all and (min-width: @lg-min) {
  .grid(@cols, lg);
}


/*Downloaded from https://www.codeseek.co/oieduardorabelo/responsive-grid-KwJEed */
    

Comments