The Grid

Grid Layout

The Luna Framework is a 12-column responsive grid by default. The column count be changed in the _settings.sass to whatever you need. This means that you can make it a 2-column grid, 24-column grid or anything in between. Each column set needs to be with in a .row class and must by default be prepended with one of the following prefixes. .xs- .sm- .md- .lg- .xl-

More breakpoint can be added or can be removed in _settings.sass file

<div class="wrapper">
  <div class="row">
    <div class="md-col-4"></div>
    <div class="md-col-4"></div>
    <div class="md-col-4"></div>
  </div>
</div>

Column Offset Layout

Columns can be easily offset by using the .{prefix}-offset-{num} classes. Different offset can be set for different screen sizes by added multiple classes to a single element.

<div class="row">
 <div class="md-col-4 md-offset-4"></div>
 <div class="md-col-4"></div>
</div>

Float Columns

Columns can be floated left or right by using the following set for classes at the appropriated screen sizes. .{prefix}-float-{direction}

<div class="row">
 <div class="md-col-4 md-float-right"></div>
 <div class="md-col-4 md-float-left"></div>
</div>

Equal Height Columns

All column elements will float to the left or when specified, right. This will collapse the element. To remedy this problem a class of .flex can be added to the parent element to give the columns an equal height.

When .flex is added. The float classes will not work.

This must be manually added by using flex box ordering classes.

<div class="row flex">
 <div class="md-col-6"></div>
 <div class="md-col-6"></div>
</div>

Show & Hide Columns.

Element can also be hidden or shown on different screen sizes. Find out more by visiting CSS HELPER section.

Read More