cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              ## Basic container and columns

The grid uses a container class of **.l-container**, which is the max width of the website, and centered.
Columns classes are **.l-col--4**, etc.

The default **$column-count** is 12. The default container gutter is **20px on each side**. The default column gutter is **10px on each side**. Column gutters are **padding, using border box**.

When the screen size is smaller than **$breakpoint-mid**, each column becomes full width, and columns stack.

```HTML
<div class="l-container">
  
  <div class="l-col--4">
      This column is 4 of 12 columns wide
  </div>
  
  <div class="l-col--6">
      This column is 8 of 12 columns wide
  </div>

</div>
```
<div class="l-container" style="background-color:deeppink">
  <br>
  <div class="l-col--4" style="background-color: green;">
    <br>
    <br>
    This column is 4 of 12 columns wide
    <br><br><br>
  </div>
  
  <div class="l-col--8" style="background-color: yellow;">
    <br>
    <br>
    This column is 8 of 12 columns wide
    <br><br><br>
  </div>
  <br>
</div>

  
## Full width Background Image

To add a background behind the grid, add an **.l-container-wrapper** parent element.
The **.l-container-wrapper** element has preset styles for a background image, so simply add the background-image itself inline.

```HTML
<div class="l-container-wrapper" style="background-image: url(image.jpg);">
  <div class="l-container">
    <div class="l-col--4">
```

<div class="l-container-wrapper" style="background-image:url('http://jam.domain7.net/1500/800/1');">
  <br><br><br>
  <div class="l-container" style="background-color:rgba(0,0,0,0.35)">
    <br>
    <div class="l-col--4" style="background-color:orange">
      <br>
      <br>
      This column is 4 of 12 columns wide
      <br><br><br>
    </div>
    <div class="l-col--8" style="background-color:purple">
      <br>
      <br>
      This column is 8 of 12 columns wide
      <br><br><br>
    </div>
  </div>
  <br><br><br>
</div>


## Grid container and column variants 

There are some class variants to quickly tweak the grid. For instance:

### Center columns in container
**.l-container--centered** will center all columns inside the container element.

```HTML
<div class="l-container l-container--centered">
  <div class="l-col--6">
    I may only be 6 columns wide, but look how centered I am. 
  </div>
</div>
```

### Remove gutter from columns
**.l-no-gutter**, when added to a column, will remove gutter (padding) from the column to make it flush. 


```HTML
<div class="l-container">
  <div class="l-col--2 l-no-gutter">
```

### Vertical spacing classes 
**.l-space--x1** will add 1 unit of spacing as bottom margin to an element (space unit default is 25px, set as sass var at top of stylesheet). **.l-space--x4** will add 4 units of space.

```
<div class="l-container">
  <div class="l-col--6 l-space--x6"
```

### SASS function for column widths in stylesheets
The **col function** can be used within stylesheets to set widths of elements.

```SCSS
// 4 of 12 columns wide
.cheese {
  width: col(4);
}
```

## Kitchen sink example

Here is an example of some horizontally centered columns in a grid.

<div class="l-container-wrapper" style="background-image:url('http://jam.domain7.net/1500/800/1');">
  <div class="l-container l-container--centered">
    <div class="l-col--4">
      <br><br>
      Hello. I am a four column wide column. I have gutter on each side. I love my life. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci.
      <br><br><br>    
    </div>
    <div class="l-col--4 l-no-gutter">
      <br><br>
      Hello. I am a four column wide column. I have gutter on each side. I love my life.  Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci.
      <br><br><br>    
    </div>
  </div>
</div>
            
          
!
            
              /*
	Layout goes in this file.
	Layout classes should be prefixed `.l-`
*/

$breakpoint-no-mediaqueries: 1020px !default; // Not necessary if using sassyplate
$breakpoint-large: 1200px !default; // Not necessary if using sassyplate
$breakpoint-mid: 820px !default; // Not necessary if using sassyplate

$l-gutter-body: 20px !default;
$l-gutter-column: 10px !default;
$l-column-count: 12 !default;
$l-container-width: $breakpoint-large;
$l-col-width: 100% / $l-column-count;

// Optional fullwidth wrapper element
.l-container-wrapper {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  // Clearfix
  zoom: 1;
  &:after {
    content:" ";
    display: block;
    clear: both;
  }
}

// Grid container and column styles
.l-container {
  width: 100%;
  max-width: $l-container-width + ($l-gutter-body*2);
  box-sizing: inherit; // If not using autoprefixer, add vendor prefixes here
  margin: 0 auto;
  display: block;
  padding-left: $l-gutter-body;
  padding-right: $l-gutter-body;
  // Clearfix
  zoom: 1;
  &:after {
    content:" ";
    display: block;
    clear: both;
  }
  div[class*='l-col--'] {
    float: left;
    padding-left: $l-gutter-column;
    padding-right: $l-gutter-column;
    box-sizing: inherit; // If not using autoprefixer, add vendor prefixes here
    min-height: 1px;
    &.l-no-gutter {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
  .no-mediaqueries & {
    min-width: $breakpoint-no-mediaqueries;
  }
  &--centered {
    text-align: center;
    div[class*='l-col--'] {
      float: none !important;
      display:inline-block;
      vertical-align:top;
    }
  }
}

// Col function, for use setting column widths in stylesheets instead of with inline classes
@function col($columns){
  @return $l-col-width * $columns;
}

// Classes for columns .col-1 through .col-12
$i: 1;
@for $i from 1 through $l-column-count {
  .l-col--#{$i} {
    width: $l-col-width * $i;
    @media (max-width: $breakpoint-mid) {
      width: 100% !important;
    }
  }
}

// Add background colours to columns and container
@mixin layout-test {
  .l-container-wrapper {
    background: rgba(black,0.15);
  }
  .l-container {
    background: rgba(black,0.25);
  }
  [class*='l-col-'] {
    background: rgba(black,0.35);
  }
}
body {
  //@include layout-test; // Uncomment this line to enable layout test
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console