Mark McCann

￩ Back

 •  Application: CSS, LESS

grid.less

A responsive, versatile grid system written in LESS.

Until the mind-blowingly awesome CSS Grid Module becomes the standard, we are left doing web layouts the old-fashioned way. I created this grid to be flexible and responsive; controlling the columns, their widths, and gutters on different viewports with nothing more than a few classes. Enjoy.

View Source
Content Gutter

Basic Usage

<div class="grid-x"> <!-- replace the "x" with the # of columns desired (1-6) -->
    <div class="grid-block"></div>
    <div class="grid-block"></div>
</div>
.grid-1
.grid-2
 
.grid-3
 
 
.grid-4
 
 
 
.grid-5
 
 
 
 
.grid-6
 
 
 
 
 

Making it Responsive

<!-- small screens + -->
<div class="grid-x">
    <div class="grid-block">
    <div class="grid-block">
</div>

<!-- medium screens + -->
<div class="grid-x-md">
    <div class="grid-block">
    <div class="grid-block">
</div>

<!-- large screens only -->
<div class="grid-x-lg">
    <div class="grid-block">
    <div class="grid-block">
</div>

Examples

You can mix and match the classes above however you like. To help you get an idea of what's possible, here are a few examples.

<div class="grid-3-md grid-6-lg">
    <div class="grid-block">
    <div class="grid-block">
    <div class="grid-block">
    <div class="grid-block">
    <div class="grid-block">
    <div class="grid-block">
</div>
 
 
 
 
 
 
<div class="grid-2 grid-3-md grid-5-lg">
    <div class="grid-block">
    <div class="grid-block">
    <div class="grid-block">
    <div class="grid-block">
    <div class="grid-block">
</div>
 
 
 
 
 
<div class="grid-3 grid-4-lg">
    <div class="grid-block">
    <div class="grid-block">
    <div class="grid-block">
    <div class="grid-block">
</div>
 
 
 
 

Offset Widths

If you want different widths for each column, just add one of the custom width classes to each grid-block you want changed.

<div class="grid-x">
    <div class="grid-block grid-xx"></div> <!-- replace "xx" with width desired -->
    <div class="grid-block grid-xx"></div>
</div>
10
90
15
85
17
83
20
80
25
75
30
70
33
66
40
60
50
50

Making it Responsive

<!-- small screens + -->
<div class="grid-x">
    <div class="grid-block grid-xx">
    <div class="grid-block grid-xx">
</div>

<!-- medium screens + -->
<div class="grid-x">
    <div class="grid-block grid-xx-md">
    <div class="grid-block grid-xx-md">
</div>

<!-- large screens only -->
<div class="grid-x">
    <div class="grid-block grid-xx-lg">
    <div class="grid-block grid-xx-lg">
</div>

Examples

Again, to help you get an idea of what's possible, here are a few examples.

<div class="grid-2">
    <div class="grid-block grid-30-md grid-25-lg"></div>
    <div class="grid-block grid-70-md grid-75-lg"></div>
</div>
 
 
<div class="grid-2">
    <div class="grid-block grid-60 grid-83-lg"></div>
    <div class="grid-block grid-40 grid-17-lg"></div>
</div>
 
 
<div class="grid-3">
    <div class="grid-block grid-20 grid-30-md"></div>
    <div class="grid-block grid-20 grid-30-md"></div>
    <div class="grid-block grid-60 grid-40-md"></div>
</div>
 
 
 

Gutters

Since this system is written with LESS, you can control the size of your gutters by just changing a few values. The default values are listed below.

// small screens
@gutter-2: 1.25rem;  // 20px
@gutter-3: .9375rem; // 15px
@gutter-4: .625rem;  // 10px
@gutter-5: .5rem;    // 8px
@gutter-6: .5rem;    // 8px

// medium screens
@gutter-2-md: 1.875rem; // 30px
@gutter-3-md: 1.25rem;  // 20px
@gutter-4-md: .9375rem; // 15px
@gutter-5-md: .625rem;  // 10px
@gutter-6-md: .625rem;  // 10px

// large screens
@gutter-2-lg: 2.8125rem; // 45px
@gutter-3-lg: 1.875rem;  // 30px
@gutter-4-lg: 1.25rem;   // 20px
@gutter-5-lg: .9375rem;  // 15px
@gutter-6-lg: .9375rem;  // 15px

// note: pixel conversions are based on a 16px root

Breakpoints

You can also adjust the breakpoints. At this time, grid.less only supports three sizes: small (base), medium, and large.

@medium: 30.625rem; // 490px
@large:  50rem;     // 800px

Collapsed Grid

If you don't want the gutters, add the "grid-collapse" class to the container to suppress them.

<div class="grid-x grid-collapse">
    <div class="grid-block"></div>
    <div class="grid-block"></div>
</div>
.grid-1
.grid-2
 
.grid-3
 
 
.grid-4
 
 
 
.grid-5
 
 
 
 
.grid-6
 
 
 
 
 

Float Right

By default, the grid blocks float to the left. To go the other direction, add the "grid-right" class.

<div class="grid-x grid-right">
    <div class="grid-block"></div>
    <div class="grid-block"></div>
</div>
1
2

Stacked Grid

You can have as many blocks in your grid as you want, just keep in mind that if those blocks have different heights, the results will be unpredictable. It is safer to just have as many blocks as you have columns, unless you are confident the heights are all the same.

 
 
 
 
 
 

Nested Grid

It is also possible to nest the grid, but it is probably a good idea to collapse the gutters for the internal grids, otherwise their gutters will probably be too large for your needs.

<div class="grid-2">
    <div class="grid-block grid-2 grid-collapse">
        <div class="grid-block"></div>
        <div class="grid-block"></div>
    </div>
    <div class="grid-block grid-2 grid-collapse">
        <div class="grid-block"></div>
        <div class="grid-block"></div>
    </div>
</div>
 
 
 
 
￪ Top