Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

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

Packages

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.

Behavior

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.

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.

HTML

              
                <main>
  <div class="grid grid__1">
    <i class="fas fa-chess-rook"></i>
  </div>
  <div class="grid grid__2">
    <i class="fas fa-chess-bishop"></i>
  </div>
  <div class="grid grid__3">
    <i class="fas fa-chess-knight"></i>
  </div>
  <div class="grid grid__4">
    <i class="fas fa-chess-queen"></i>
  </div>
  <div class="grid grid__5">
    <i class="fas fa-chess-king"></i>
  </div>
  <div class="grid grid__6">
    <i class="fas fa-chess-knight"></i>
  </div>
  <div class="grid grid__7">
    <i class="fas fa-chess-bishop"></i>
  </div>
  <div class="grid grid__8">
    <i class="fas fa-chess-rook"></i>
  </div>
  <div class="grid grid__9">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__10">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__11">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__12">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__13">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__14">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__15">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__16">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__17"></div>
  <div class="grid grid__18"></div>
  <div class="grid grid__19"></div>
  <div class="grid grid__20"></div>
  <div class="grid grid__21"></div>
  <div class="grid grid__22"></div>
  <div class="grid grid__23"></div>
  <div class="grid grid__24"></div>
  <div class="grid grid__25"></div>
  <div class="grid grid__26"></div>
  <div class="grid grid__27"></div>
  <div class="grid grid__28"></div>
  <div class="grid grid__29"></div>
  <div class="grid grid__30"></div>
  <div class="grid grid__31"></div>
  <div class="grid grid__32"></div>
  <div class="grid grid__33"></div>
  <div class="grid grid__34"></div>
  <div class="grid grid__35"></div>
  <div class="grid grid__36"></div>
  <div class="grid grid__37"></div>
  <div class="grid grid__38"></div>
  <div class="grid grid__39"></div>
  <div class="grid grid__40"></div>
  <div class="grid grid__41"></div>
  <div class="grid grid__42"></div>
  <div class="grid grid__43"></div>
  <div class="grid grid__44"></div>
  <div class="grid grid__45"></div>
  <div class="grid grid__46"></div>
  <div class="grid grid__47"></div>
  <div class="grid grid__48"></div>
  <div class="grid grid__49">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__50">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__51">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__52">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__53">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__54">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__55">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__56">
    <i class="fas fa-chess-pawn"></i>
  </div>
  <div class="grid grid__57">
    <i class="fas fa-chess-rook"></i>
  </div>
  <div class="grid grid__58">
    <i class="fas fa-chess-bishop"></i>
  </div>
  <div class="grid grid__59">
    <i class="fas fa-chess-knight"></i>
  </div>
  <div class="grid grid__60">
    <i class="fas fa-chess-queen"></i>
  </div>
  <div class="grid grid__61">
    <i class="fas fa-chess-king"></i>
  </div>
  <div class="grid grid__62">
    <i class="fas fa-chess-knight"></i>
  </div>
  <div class="grid grid__63">
    <i class="fas fa-chess-bishop"></i>
  </div>
  <div class="grid grid__64">
    <i class="fas fa-chess-rook"></i>
  </div>
</main>
              
            
!

CSS

              
                *,
*::before,
*::after {
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  display: flex;
  justify-content: center;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 850px;
  padding:25px;
  width:850px;
}

.grid {
  flex: 0 0 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:60px;
}

@for $i from 0 through 3 {
  .grid:nth-child(#{2*$i+1}) {
    background: #000;
  }
}

@for $i from 4 through 7 {
  .grid:nth-child(#{2*$i+2}) {
    background: #000;
  }
}

@for $i from 8 through 11 {
  .grid:nth-child(#{2*$i+1}) {
    background: #000;
  }
}

@for $i from 12 through 15 {
  .grid:nth-child(#{2*$i+2}) {
    background: #000;
  }
}


@for $i from 16 through 19 {
  .grid:nth-child(#{2*$i+1}) {
    background: #000;
  }
}

@for $i from 20 through 23 {
  .grid:nth-child(#{2*$i+2}) {
    background: #000;
  }
}

@for $i from 24 through 27 {
  .grid:nth-child(#{2*$i+1}) {
    background: #000;
  }
}

@for $i from 28 through 31 {
  .grid:nth-child(#{2*$i+2}) {
    background: #000;
  }
}

@for $i from 0 through 16 {
  .grid:nth-child(#{$i}) {
    color:burlywood;
  }
}

@for $i from 48 through 64 {
  .grid:nth-child(#{$i}) {
    color:slategray;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console