Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource


Babel includes JSX processing.

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


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


                <div class="wrapper">

<div class="box flex">
  <div>I am flex item 1</div>
  <div>I am flex item 2</div>
  <div>I am flex item 3</div>
  <div>I am flex item 4</div>

<div class="box grid">
  <div>I am grid item 1</div>
  <div>I am grid item 2</div>
  <div>I am grid item 3</div>
  <div>I am grid item 4</div>
<div class="box multicol">

<p>As the moment for departure drew near, friends became impatient, and every one anxiously watched the final arrangements, which were made by Mr Coxwell, on whom was laid the important duty of letting go. His hand was on the catch, his countenance was fixed, and his expression stern, as he gazed up into the heavens. He was waiting for the right moment, for the sky was partially cloudy, and it was necessary to wait until the balloon was midway between the cloud that had just passed and the next that was approaching, so that the aeronauts might have a clear sky, and be able to see the earth they were about to quit for a time. Nor was this all; he knew that in every wind, however strong it might be, there are periods of calm. If he could start in one of these he would avoid much rotatory motion. The deciding, therefore, of the exact moment for making a fair start was not so easy a matter as one might suppose.</p>

<p>Some one at this critical time, with the characteristic eagerness of poor human nature to “put its finger in the pie,” cried out “Now!” and another shouted “Pull!” but Mr Coxwell, regardless of every one, decided for himself; and, just when the wind lulled and the sun shone bright, and the balloon stood proudly erect, he pulled the trigger and they were free.</p>

<p>But they were more than free. They were suddenly in profound repose, for—however high the wind may be, however agitated the balloon, swaying to and fro with sudden and violent action, despite the efforts of many hands that endeavour to restrain it,—no sooner do aeronauts quit their hold of earth, than, in an instant, all agitation ceases and they are in perfect stillness, without any sense of motion whatever; and this freedom continues throughout the entire flight—except, indeed, when they sink so low as to come into contact with mother earth, when the serenity of their flight is terribly and violently interrupted, as shall be seen in the case of another balloon voyage hereafter to be described.</p>


                @mixin gridded($type: grid, $col: 20em, $gap: $gap) {
  @if ($type == 'flex') {
    display: flex;
    flex-wrap: wrap;
    margin-left:  -#{$gap} ;
    > * {
      flex: 1 1 $col;
      margin: 0 0 $gap $gap;
  @if ($type == 'grid') {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax($col,1fr));
    grid-gap: $gap;

  @if ($type == 'multicol') {
    column-gap: $gap;
    column-width: $col;

* { box-sizing: border-box; }

.wrapper {
  width: 90%;
  margin: 0 auto;

p {
  margin: 0;
  padding: 0 0 1em 0;

.box {
  margin-bottom: 2em;

.box > div {
  border: 5px solid rgb(61, 63, 112);
  background-color: rgba(61, 63, 112,.7);
  color: #fff;
  border-radius: 10px;
  padding: 10px;

body {
  padding: 40px;
  background-color: rgb(255,255,255);
  color: rgb(61, 63, 112);
  font: 1.1em/1.4 "Open Sans", sans-serif;

.multicol {
  @include gridded('multicol',200px,20px);

  @include gridded('grid',200px,20px);

.flex {
  @include gridded('flex',200px,20px);