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.

            
              <h1>Raster.gs Demos</h1>

<p>Look at the markup, test the settings in SCSS and try resizing your browser window!</p>
<!-- 

PLEASE NOTE: GRID-DEMO, VISUALIZE-DEMO-GRID AND SCAFFOLDING MARKUP IS ONLY NEEDED FOR DEMO PURPOSES, YOU WILL NOT NEED THEM IN YOUR CODE 

-->
<h2>Simple four column grid</h2>

<p>Lets pick a grid with 4 columns, name it "four-column-demo" and set the spacing between the columns to 4%.</p>
<pre><code>  &lt;div class="grid-row"&gt;
    &lt;div class="four-column-demo-1-3"&gt;four-column-demo-1-3&lt;/div&gt;
    &lt;div class="four-column-demo-4"&gt;four-column-demo-4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="grid-row"&gt;
    &lt;div class="four-column-demo-1"&gt;four-column-demo-1&lt;/div&gt;
    &lt;/div&gt;</code></pre>

<div class="grid-demo">
    <div class="visualize-demo-grid">
        <div class="four-column-demo-1 scaffolding"></div>
        <div class="four-column-demo-2 scaffolding"></div>
        <div class="four-column-demo-3 scaffolding"></div>
        <div class="four-column-demo-4 scaffolding"></div>
    </div>

    <div class="grid-row">
        <div class="four-column-demo-1-3">four-column-demo-1-3</div>
        <div class="four-column-demo-4">four-column-demo-4</div>
    </div>
    <div class="grid-row">
        <div class="four-column-demo-1">four-column-demo-1</div>
    </div>
</div>

<h2>Nesting different grids has never been so easy</h2>

<p>Have one grid for your layout and one grid for a special gallery? No problem!</p>
<pre><code>&lt;div class="grid-row"&gt;
    &lt;div class="layout-1-3"&gt;
    &lt;div class="grid-row"&gt;
    &lt;div class="gallery-1"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-1"&gt;&lt;/div&gt;
    &lt;div class="gallery-2"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-2"&gt;&lt;/div&gt;
    &lt;div class="gallery-3"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-3"&gt;&lt;/div&gt;
    &lt;div class="gallery-4"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-4"&gt;&lt;/div&gt;
    &lt;div class="gallery-5"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-5"&gt;&lt;/div&gt;
    &lt;div class="gallery-6"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-6"&gt;&lt;/div&gt;
    &lt;div class="gallery-7"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-7"&gt;&lt;/div&gt;
    &lt;div class="gallery-8"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-8"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="grid-row"&gt;
    &lt;div class="gallery-1"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-1"&gt;&lt;/div&gt;
    &lt;div class="gallery-2"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-2"&gt;&lt;/div&gt;
    &lt;div class="gallery-3"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-3"&gt;&lt;/div&gt;
    &lt;div class="gallery-4"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-4"&gt;&lt;/div&gt;
    &lt;div class="gallery-5"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-5"&gt;&lt;/div&gt;
    &lt;div class="gallery-6"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-6"&gt;&lt;/div&gt;
    &lt;div class="gallery-7"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-7"&gt;&lt;/div&gt;
    &lt;div class="gallery-8"&gt;&lt;img src="http://placehold.it/500x500&amp;text=gallery-8"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="layout-4"&gt;layout-4&lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;</code></pre>

<div class="grid-demo">
    <div class="visualize-demo-grid">
        <div class="layout-1 scaffolding"></div>
        <div class="layout-2 scaffolding"></div>
        <div class="layout-3 scaffolding"></div>
        <div class="layout-4 scaffolding"></div>
    </div>

    <div class="grid-row">
        <div class="layout-1-3">
            <div class="grid-row">
                <div class="gallery-1"><img src="http://placehold.it/500x500&text=gallery-1"></div>
                <div class="gallery-2"><img src="http://placehold.it/500x500&text=gallery-2"></div>
                <div class="gallery-3"><img src="http://placehold.it/500x500&text=gallery-3"></div>
                <div class="gallery-4"><img src="http://placehold.it/500x500&text=gallery-4"></div>
                <div class="gallery-5"><img src="http://placehold.it/500x500&text=gallery-5"></div>
                <div class="gallery-6"><img src="http://placehold.it/500x500&text=gallery-6"></div>
                <div class="gallery-7"><img src="http://placehold.it/500x500&text=gallery-7"></div>
                <div class="gallery-8"><img src="http://placehold.it/500x500&text=gallery-8"></div>
            </div>
            <div class="grid-row">
                <div class="gallery-1"><img src="http://placehold.it/500x500&text=gallery-1"></div>
                <div class="gallery-2"><img src="http://placehold.it/500x500&text=gallery-2"></div>
                <div class="gallery-3"><img src="http://placehold.it/500x500&text=gallery-3"></div>
                <div class="gallery-4"><img src="http://placehold.it/500x500&text=gallery-4"></div>
                <div class="gallery-5"><img src="http://placehold.it/500x500&text=gallery-5"></div>
                <div class="gallery-6"><img src="http://placehold.it/500x500&text=gallery-6"></div>
                <div class="gallery-7"><img src="http://placehold.it/500x500&text=gallery-7"></div>
                <div class="gallery-8"><img src="http://placehold.it/500x500&text=gallery-8"></div>
            </div>
        </div>
        <div class="layout-4">layout-4</div>
    </div>
</div>

<h2>Different grids for different viewports</h2>

<p>Lets create a normal <strong>8 column viewport for desktops</strong> first. We only want to show it for desktops
    above 1024px viewport width. The name for this shall be "desktop-demo". We want to use the default spacing for the
    gutters.</p>

<p>It would be nice to have another <strong>grid for mobile phones or tables</strong>. So let's create a grid with 2
    columns and 10% spacing. We name it "mobile-demo" and we only use it for viewports below 1024px</p>

<pre>
<pre><code>  &lt;div class="grid-row"&gt;
    &lt;div class="mobile-demo-1 desktop-demo-1-6"&gt;mobile-demo-1&lt;br/&gt;desktop-demo-1-6&lt;/div&gt;
    &lt;div class="mobile-demo-2 desktop-demo-8"&gt;mobile-demo-2&lt;br/&gt;desktop-demo-8&lt;/div&gt;
    &lt;/div&gt;</code></pre>
</pre>

<div class="grid-demo">
    <div class="visualize-demo-grid">
        <div class="mobile-demo-1 scaffolding"></div>
        <div class="mobile-demo-2 scaffolding"></div>
        <div class="desktop-demo-1 scaffolding"></div>
        <div class="desktop-demo-2 scaffolding"></div>
        <div class="desktop-demo-3 scaffolding"></div>
        <div class="desktop-demo-4 scaffolding"></div>
        <div class="desktop-demo-5 scaffolding"></div>
        <div class="desktop-demo-6 scaffolding"></div>
        <div class="desktop-demo-7 scaffolding"></div>
        <div class="desktop-demo-8 scaffolding"></div>
    </div>

    <div class="grid-row">
        <div class="mobile-demo-1 desktop-demo-1-6">mobile-demo-1<br/>desktop-demo-1-6</div>
        <div class="mobile-demo-2 desktop-demo-8">mobile-demo-2<br/>desktop-demo-8</div>
    </div>
</div>
            
          
!
            
              //* ----------------------------------------------------- */
// Play with these settings
// * if you change number of columns, make sure to alsp change the scaffoling classes in HTML
//* ----------------------------------------------------- */

//Simple 4 column grid
$four-column-demo: (
  columns: 4,
  prefix: four-column-demo,
  gutter: 4
);
@include raster($four-column-demo);

//nesting different grids
$layout: (
  columns: 4,
  prefix: layout
);
@include raster($layout);

$gallery: (
  columns: 8,
  prefix: gallery,
  gutter: 1
);
@include raster($gallery);

//Different grids for different viewports
@media (min-width: 1024px){
    $desktop-demo: (
      columns: 8,
      prefix: desktop-demo
    );
    @include raster($desktop-demo);
}
@media (max-width: 1024px){
    $mobile-demo: (
      columns: 2,
      prefix: mobile-demo,
      gutter: 10
    );
    @include raster($mobile-demo);
}












//* ----------------------------------------------------- */
//* ----------------------------------------------------- */
//* ----------------------------------------------------- */
//* ----------------------------------------------------- */
//* ----------------------------------------------------- */
//* ----------------------------------------------------- */
// These classes are only for demo purposes, they are not part of the grid
//* ----------------------------------------------------- */
.grid-demo {
    margin: 20px 0 50px;
    position: relative;

    img {
        max-width: 100%;
        margin-bottom: 10px;
    }
}

.grid-demo > .grid-row > div {
    background: #AAA;
    padding: 100px 0;
    text-align: center;
    color: #FFF;
    font-size: 20px;
}

.grid-demo > .grid-row {
    margin-bottom: 20px;
    -webkit-box-shadow: 0 0 10px rgba(#007C96, 0.4);
}

.visualize-demo-grid {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;

    .scaffolding {
        background: rgba(#E36A00,0.3);
        -webkit-box-shadow: inset 0 0 0 2px rgba(#E36A00, 0.5);
        height: 100%;
        min-height: 100%;
    }
}

@media (min-width:1024px) {
    .visualize-demo-grid div[class*='mobile'] {
        display: none !important;
    }
}

@media (max-width:1024px) {
    .visualize-demo-grid div[class*='desktop'] {
        display: none !important;
    }
}
            
          
!
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