cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-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 class="h1-like">Grillade.css testing</h1>
<p class="txtcenter">public URL : <a href="http://kiwi.gg/g">kiwi.gg/g</a></p>

<h2 class="h2-like">single column</h2>
<p><b>Action:</b> put a <code>class="grid"</code> on grid container.</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices (<= 544px)</li>
  <li>1 column on small devices (545px -> 767px)</li>
  <li>1 column on higher devices (> 767px)</li>
</ul>
<div class="grid">
  <div>Lorem</div>
</div> <!-- / grid container -->

<table>
  <caption>Tests results : single column</caption>
  <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
</table>

<h2 class="h2-like">three equal columns</h2>
<p><b>Action:</b> put a <code>class="grid-3-small-2"</code> on grid container.</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices (<= 544px)</li>
  <li>2 equal columns on small devices (545px -> 767px)</li>
  <li>3 equal columns on higher devices (> 767px)</li>
  <li>Picture scales down on tiny screens</li>
</ul>
<div class="grid-3-small-2">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>
    and a picture! <br />
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9425/chuck-norris-775.jpg" alt="chucky" width="775">
  </div>
</div> <!-- / grid container -->

<table>
  <caption>Tests results : three equal columns</caption>
  <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
</table>


<h2 class="h2-like">three unequal columns</h2>
<p><b>Action:</b> put a <code>class="grid-3-small-2"</code> on grid container. and put <code>.one-quarter</code> or <code>.one-half</code> classes on each children.</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices (<= 544px)</li>
  <li>2 equal columns on small devices (545px -> 767px)</li>
  <li>3 unequal columns on higher devices (> 767px)</li>
</ul>
<div class="grid-3-small-2">
  <div class="one-quarter">.one-quarter</div>
  <div class="one-half">.one-half (no class should work fine too)</div>
  <div class="one-quarter">.one-quarter</div>
</div> <!-- / grid container -->

<table>
  <caption>Tests results : three unequal columns</caption>
 <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
</table>


<h2 class="h2-like">three unequal columns with gutter</h2>
<p><b>Action:</b> put a <code>class="grid-3-small-2 has-gutter"</code> on grid container.<br> put <code>.one-quarter</code> or <code>.one-half</code> classes on each children.
  <br> gutter size can be <code>.has-gutter</code>, <code>.has-gutter-l</code> or <code>.has-gutter-xl</code> (or can be modified in SCSS variables).
</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices (<= 544px)</li>
  <li>2 equal columns on small devices (545px -> 767px)</li>
  <li>3 unequal columns on higher devices (> 767px)</li>
  <li>gutter appears between columns</li>
  <li>children's sizes are correctly designed</li>
</ul>
<div class="grid-3-small-2 has-gutter">
  <div class="one-quarter">.one-quarter</div>
  <div class="one-half">.one-half (no class should work fine too)</div>
  <div class="one-quarter">.one-quarter</div>
  <div class="one-quarter">.one-quarter</div>
  <div class="three-quarters">.three-quarters</div>
  <div class="one-half">.one-half</div>
  <div class="one-half">.one-half</div>
</div> <!-- / grid container -->

<table>
  <caption>Tests results : three unequal columns with gutter</caption>
 <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
</table>


<h2 class="h2-like">three columns with offset</h2>
<p><b>Action:</b> put a <code>class="grid-3"</code> on grid container.<br> put a <code>.push</code> on child who needs to be pushed right.</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices (<= 544px)</li>
  <li>3 equal columns on higher devices (> 767px)</li>
  <li>4th child is pushed on the right (on small devices minimum)</li>
</ul>
<div class="grid-3">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div class="push">.push</div>
  <div>five</div>
</div> <!-- / grid container -->

<table>
  <caption>Tests results : three columns with push</caption>
 <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
</table>


<h2 class="h2-like">nested grid</h2>
<p><b>Action:</b> put a <code>class="grid-3"</code> on grid container.<br> put a <code>class="grid-2"</code> on a child</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices (<= 544px)</li>
  <li>3 equal columns on higher devices (> 767px)</li>
  <li>4th child is nested</li>
</ul>
<div class="grid-3">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div class="grid-2">
    <div>nested</div>
    <div>nested</div>
  </div>
  <div>five</div>
</div> <!-- / grid container -->

<table>
  <caption>Tests results : three columns with push</caption>
 <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>...</td>
  </tr>
</table>
            
          
!
            
              // breakpoints
$tiny: 544px;
$small: 768px;


/* deco */

div > div {
  padding: 1rem;
  background: rgba(86,61,124,.15);
  border: 1px solid rgba(86,61,124,.2);
}

* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}
html {
  font-size: 62.5%;
  font-size: calc(0.625em * 1);
}
body {
	margin: 2rem; 
	padding: 1rem 0;
  line-height: 1.4;
	font-family: arial, sans-serif;
  font-size: 1.6em;
  background: #fff;
}
.h1-like {
	margin: 0 0 1em;
	color: #345;
	text-align: center;
  font-family: georgia, "trebuchet ms", arial, serif;
}
.h2-like {
	margin: 3rem 0 1rem;
	color: #567;
  font-family: georgia, "trebuchet ms", arial, serif;
}
.txtcenter {
	text-align: center;
}
code {
	font-size: 110%;
	color: firebrick;
}
li {
  margin-bottom: 5px;
}
a {
  color: hotpink
}
.ok {
  color: green;
  font-weight: bold;
}
table {
  border: 1px solid #ccc; 
  border-collapse: collapse;
  margin-top: 4rem;
  margin-bottom: 4rem;
}

caption {
  padding: 1rem;
  color: #555;
  font-style: italic; }

td,
th {
  padding: 0.3em 0.8em;
  border: 1px #aaa dotted;
  text-align: left; 
}
thead tr {
  background: #eee;
}
            
          
!
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