Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="central-content">
    <div class="header-container">
      <div class="container">
    <h1>Demo: Ning 3.0 Grid layout (Row and Span)</h1>

    <section class="show-spans">

        <p>The grid is defined by horizontal <code>row</code>s, each containing one or more
            <code>span</code>s, which each have a width that is an integral number of columns.</p>
        <p>The desktop grid is 16 columns wide.  These columns remain the same size, even on smaller screens,
            so smaller screens get fewer columns per row (12, 8, or 5).
            Top-level <code>row</code>s are as wide as the page, but it is possible for shorter
            <code>row</code>s to occur in nested layouts.
            If the total of the sizes of the <code>span</code>s in a <code>row</code> exceeds the
            number of columns in the <code>row</code>, the remaining spans will drop
            and be displayed below.</p>
        <p>Below are some example grid layouts.  A white background
        has been added to the spans page so you can see where
        they are.  Additionally, you can hover over a row to see its
        outline, and over a span to see its padding.</p>
        <div class="row">
            <div class="span16">.span16</div>
        </div>
        <div class="row">
            <div class="span8">.span8</div>
            <div class="span4">.span4</div>
            <div class="span4">.span4</div>
        </div>
        <div class="row">
            <div class="span2">.span2</div>
            <div class="span2">.span2</div>
            <div class="span2">.span2</div>
            <div class="span2">.span2</div>
            <div class="span1">.span1</div>
            <div class="span1">.span1</div>
            <div class="span1">.span1</div>
            <div class="span1">.span1</div>
            <div class="span1">.span1</div>
            <div class="span1">.span1</div>
            <div class="span1">.span1</div>
            <div class="span1">.span1</div>
        </div>
    </section>

    <section class="show-spans">
        <p>Larger spans can be used, but on smaller screens, span width
            is limited to screen width.</p>
        <div class="row">
            <div class="span15">.span15</div>
            <div class="span1">.span1</div>
        </div>
        <div class="row">
            <div class="span14">.span14</div>
            <div class="span2">.span2</div>
        </div>
        <div class="row">
            <div class="span13">.span13</div>
            <div class="span3">.span3</div>
        </div>
        <div class="row">
            <div class="span12">.span12</div>
            <div class="span4">.span4</div>
        </div>
        <div class="row">
            <div class="span11">.span11</div>
            <div class="span5">.span5</div>
        </div>
        <div class="row">
            <div class="span10">.span10</div>
            <div class="span6">.span6</div>
        </div>
        <div class="row">
            <div class="span9">.span9</div>
            <div class="span7">.span7</div>
        </div>
    </section>

    <section class="show-spans">
        <h2 id="Nesting_Spans">Nesting Spans</h2>
        <p>You can nest <code>span</code>s inside <code>row</code>s,
            or <code>row</code>s inside <code>span</code>s.  You
            cannot directly nest <code>span</code>s inside <code>span</code>s.</p>
        <div class="row">
            <div class="span8">
                .span6
                <div class="row">
                    <div class="span4">.span4</div>
                    <div class="span4">.span4</div>
                </div>
            </div>
            <div class="span8">
                .span6
                <div class="row">
                    <div class="span4">.span4</div>
                    <div class="span2">.span2</div>
                    <div class="span1">.span1</div>
                    <div class="span1">.span1</div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <h2 id="Framed_Spans">Framed Spans</h2>
        <p>When a row or span has a background or border, there are two options.
            The edge of the border or background can be drawn halfway into the gutter,
            or additional padding can be added inside the span.</p>
        <div class="row">
            <div class="span4">
                <p>Each <code>span</code> includes padding all around.
                    It is this padding that creates the gutters between the spans.
                    Here we've turned off the background on the spans so you can
                    see what they normally would look like.</p>
            </div>
            <div class="span4">
                <p>You can set <code>width: 100%</code> on an element inside
                    an <code>span</code> and it will span exactly to the gutter
                    on each side:</p>
                <table style="width: 100%; border: 1px solid; box-sizing: border-box">
                    <tr><td>One</td><td>Two</td><td>Three</td></tr>
                    <tr><td>01</td><td>10</td><td>11</td></tr>
                </table>
                <p style="text-align:right">You can also use
                    <code>text-align: right</code> to make your text align
                    with the right gutter.</p>
            </div>
            <div class="span4">
                <div class="grid-frame">
                    If your span has a background color or border, you probably
                    want to nest an <code>grid-frame</code> inside of your
                    <code>span</code>. The <code>grid-frame</code> contains
                    additional padding so that the text does not hit the border
                    but because of this, it breaks the grid; this text does not
                    align with text that is not in a frame.
                </div>
            </div>
            <div class="span4"
                 style="background: #ccc">
                <p>If you put a background directly on
                    an <code>span</code> it will cover half of the gutters,
                    which is usually not what's intended.
                </p>
            </div>
        </div>
        <div class="row" style="background:#ccc">
            <div class="span4">
                <p>
                    If you put a background on an <code>row</code>, it will cover
                    all the padding (half the gutters) around all the spans in the
                    row.  This <em>is</em> often what's intended.
                </p>
            </div>
            <div class="span4">
                <p>Note that the text in these spans aligns with the text in the
                    previous row, even though this row has a background and
                    that one doesn't.</p>
            </div>
            <div class="span4">
                <div class="grid-frame"
                     style="background: white; border: 1px solid #888; span-shadow: 0 2px 2px #ccc">
                    <p>Frames will align, too.</p>
                </div>
            </div>
            <div class="span4" style="background: white">
                <p>This is one case where you might want the background on an
                    <code>span</code> to extend into the gutter, so it fills
                    the surrounding <code>row</code>.  In any case, the text
                    will align with other spans, both vertically and horizontally.
                </p>
            </div>
        </div>
    </section>

    <section class="show-spans">
        <h2 id="Rows_within_a_Frame">Rows within a Frame</h2>
        <p>However, when you create a <code>grid-frame</code>, extra padding
            is introduced to keep the content from hitting the edge of the
            frame. Because of this, if you put a <code>row</code> inside of
            a <code>grid-frame</code>, the width of the row will be
            one grid column less than the width of the <code>grid-frame</code>'s
            parent <code>span</code>. In effect, the grid inside the
            <code>grid-frame</code> is shifted over by half of a grid column.
            (Note: putting a border on a <code>grid-frame</code> should
            be done using the <code>.grid-border-padding</code> mixin so
            that the padding can be adjusted accordingly.)
        </p>
        <div class="row">
            <div class="span8">.span8
                <div class="row">
                    <div class="span4">.span4</div>
                    <div class="span4">.span4</div>
                </div>
            </div>
            <div class="span8">.span8
                <div class="grid-frame">
                    .grid-frame
                    <div class="row">
                        <div class="span4">.span4</div>
                        <div class="span3">.span3</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="show-spans">
        <h2 id="Pulling_Spans_Right">Pulling Spans Right</h2>
        <p> You can also make spans fill their row right-to-left by adding the <code>pull-right</code>
            class. This often results in a more responsive layout than offsetting does.</p>
        <p> Note that mixing <code>pull-right</code> spans with default (or <code>pull-left</code>)
            spans will cause them to display in a different order from the markup.</p>
        <div class="row">
            <div class="span4">(1) .span4</div>
            <div class="span6 pull-right">(2) .span6.pull-right</div>
            <div class="span4">(3) .span4</div>
        </div>
        <div class="row">
            <div class="span6 pull-right">(1) .span6.pull-right</div>
            <div class="span6 pull-right">(2) .span6.pull-right</div>
        </div>
        <div class="row">
            <div class="span8 pull-right">.span8.pull-right</div>
        </div>
    </section>

    <section class="show-spans">
        <h2 id="Centering_Rows">Centering Rows</h2>
        <p>To center a row of spans, add <code>class="row-centered"</code>
            to the row.
            Spans which do not fit on the current row will drop to a new row and still be
            centered.</p>
        <p>However, when coding the HTML for this case, make sure that there is no
            whitespace between the <code>spans</code>.  This is because the
            centering is being done using <code>text-align: center</code> on a
            string of <code>inline-block</code>s, rather than using floats.
        </p>
        <div class="row row-centered">
            <div class="span3">.span3</div><div class="span3">.span3</div><div class="span5">.span5</div>
        </div>
    </section>

    <section class="show-spans">
        <h2 id="Increasing_the_Row_Margin">Increasing the Row Margin</h2>
        <p>Use <code>row-narrower*</code> classes to add margin to a row,
            while still aligning to the grid.  Each increment adds one
            grid column of margin to both the left and right side of
            the row.  So, for example, <code>row-narrower1</code> reduces
            the row width by two grid columns (from 16 to 14 on the desktop).</p>
        <div class="row row-narrower1">
            <p class="code">.row-narrower1</p>
            <div class="span-full">.span-full</div>
        </div>
        <div class="row row-narrower2">
            <p class="code">.row-narrower2</p>
            <div class="span-full">.span-full</div>
        </div>
    </section>

    <section class="show-spans">
        <p>When <code>row-narrower*</code>
            is used inside a <code>grid-frame</code> the margin they
            add replaces the usual margin that is added to the
            <code>row</code>s in a <code>grid-frame</code>.  So
            adding <code>row-narrower1</code> in this case, only reduces
            the row length by one grid column.</p>

        <div class="row">
            <div class="span8">.span8
                <div class="grid-frame">
                    .grid-frame
                    <div class="row">
                        <p class="code">.row</p>
                        <div class="span4">.span4</div>
                        <div class="span3">.span3</div>
                    </div>
                </div>
            </div>
            <div class="span8">.span8
                <div class="grid-frame">
                    .grid-frame
                    <div class="row row-narrower1">
                        <p class="code">.row.row-narrower1</p>
                        <div class="span3">.span3</div>
                        <div class="span3">.span3</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="show-spans">
        <p>Sometimes layouts are easier to implement using
            <code>position: absolute</code> but you still want the
            position to align with the grid.  The classes
            <code>span-reserve-right*</code> and
            <code>span-reserve-left*</code> reserve space
            (by adding padding) on the right or left side of a span.
            Spans can then be absolute positioned in that space
            with the classes
            <code>span-position-right</code> and
            <code>span-position-left</code>.
        </p>
        <div class="row">
            <div class="span8 span-reserve-right2">
                .span8.span-reserve-right2
                <div class="span2 span-position-right">
                    .span2
                </div>
            </div>
            <div class="span8 span-reserve-left1">
                .span8.span-reserve-left1
                <div class="span1 span-position-left">
                    .span1
                </div>
            </div>
        </div>
    </section>



        </div>
      </div>
    </div>
  </div>
Created by <a class="button" href="https://creators.ning.com/profile/ElSurveyor">JFarrow Ning Creator</a>
            
          
!
            
              
p {
    color:#fff;
}
h1 {color:#eee;}

html body div.xg_theme {
    background: #24384e;
}

.sheet form#settings-form div#facebook-sharing.row {
    margin-left: 130px;
}

.groupHeader-coverPhoto {
    background-size: contain;
}

.customPage .row .grid-frame {
    box-shadow: 0 0;
    margin-bottom: -20px;
}
.customPage .row .grid-frame img.hcb-icon {
    display: none;
}
.customPage .row .grid-frame #comments_list p.hcb-comment-tb {
    display: none;
}


/* this CSS is just styling to make the rows and spans more visible */
code, .code {
  font-family: Consolas, Monaco, monospace;
}
article {
  margin: 2em 0;
}
article section {
  margin: 2em 0;
}
section > p, section > h2 {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.show-spans {
  line-height: 1.5em;
}
.show-spans .row:hover {
  outline: 2px solid rgba(255,0,0,.3)
}
.show-spans [class*="span"] {
  background: #fff;
  box-shadow: 0 0 3px 1px #ddd inset;
  border-radius: 5px;
  font-family: Consolas, Monaco, monospace;
}
.row > p {
  margin: 1em 0 0 0;
}
.show-spans [class*="span"]:hover {
  padding: 0;
  border: 10px solid rgba(255,255,100,0.3);
  box-shadow: none;
}
.show-spans [class*="span"] [class*="span"] {
  background: #ddd;
  box-shadow: 0 0 3px 1px #aaa inset;
}
.show-spans .span1 {
  font-size: 80%;
}
.show-spans .span-reserve-right2:hover {
  border-right-width: 120px;
}
.show-spans .span-reserve-left1:hover {
  border-left-width: 60px;
}
.show-spans .span-reserve-right2:hover .span-position-right {
  top: -10px;
  right: -120px;
}
.show-spans .span-reserve-left1:hover .span-position-left {
  top: -10px;
  left: -60px;
}
.grid-frame {
  background: #ccc;
  border: 1px solid white;
  box-shadow: 0 2px 2px #ccc;
  padding: 9px; /* see .grid-border-padding mixin */
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console