Pen Settings

HTML

CSS

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

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

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.

HTML

              
                <header>
  <h2>Boxes</h2>
</header>
<div class="boxes">
  <div class="box one">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore cumque tempora a nostrum facere iure numquam, culpa aut, eaque vitae voluptatem sequi veniam voluptatum blanditiis aliquid eius adipisci, doloribus commodi?</p>
</div>
<div class="box two">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta officiis, dolore, optio labore perspiciatis facilis! Officiis hic voluptate eius at unde, illo, cupiditate sit labore, veniam autem id minima perferendis!</p>
</div>
<div class="box three">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non eum, maiores, ea earum, est reprehenderit culpa quibusdam soluta atque incidunt laboriosam dolorum alias sequi nobis quam eos nihil aliquam. Dolorum.</p>
</div>
<div class="box four">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In molestias autem quo repellat, consequuntur. Praesentium pariatur fugiat, iste, velit aliquid enim rem, dolor quisquam necessitatibus quo doloribus, nam nostrum perspiciatis.</p>
</div>

<div class="box five">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque laboriosam facere, reprehenderit itaque similique sit mollitia ipsam asperiores eos ratione exercitationem at harum est illum ab repellendus hic architecto rem.</div>
  
<div class="box six">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa laudantium quisquam dolore vitae aperiam saepe, perspiciatis culpa commodi asperiores recusandae nihil molestias adipisci, voluptates omnis deserunt iste quam hic eius!</div>
  
<div class="box seven">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum sunt aliquam deserunt recusandae praesentium quae in corrupti ipsa voluptatum voluptas tempora, facilis qui assumenda deleniti, culpa aperiam harum explicabo at!</div>
  
<div class="box eight">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores sint, tempore repellendus ipsum quibusdam doloribus culpa, magni laudantium dolore voluptatum nisi qui, delectus vero eligendi a. Nulla cum earum mollitia?</div>
  
</div>
<!-- end boxes -->

<footer>
  <p>Basic Media Queries Example with CSS Grid.</p>
</footer>
              
            
!

CSS

              
                /* CSS that applies to all browsers and widths*/
@import url('https://fonts.googleapis.com/css?family=Big+Shoulders+Text:800|Open+Sans:400,400i,700,700i&display=swap');

header h2, footer p{
  font-family: 'Big Shoulders Text', cursive;
  font-weight: 800;
}
.boxes{
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

/* default style for the boxes. suggestion, use border OR background-color not both (or something else if you like.) */
.box{
/*   border: 2px solid grey; */
  padding: 15px;
  background-color: #ccc;
}

    /* 
      Start Layout CSS. The styles here will apply to all widths.
      Suggestion: set base grid here. 
    */
  .boxes{
    display: grid;
    grid-template-coloumns: 1fr;
    grid-gap: 20px;
}
  
    /* ================================================================
    MEDIA QUERIES
      Here are the Media Queries where we adjust the look of the page based on the width of the viewport. Thisis mobile-first so it starts with the smallest width and also uses min-width media queries
    */

/*   ---------------------------- */
    @media (min-width: 600px){
      /* phone landscape and tablet portrait */
      .boxes{
        /* change grid columns */
        grid-template-columns: repeat(2,1fr );
      }
      
      .box{
        background-color: orange;
      }
    } 
    /*   end min-width 600 */

  /*   ---------------------------- */
    @media (min-width: 900px){
       /* tablet landscape */
      .boxes{
        /* change grid columns */
        grid-template-columns: repeat(3,1fr );
      }
      
      .box{
        background-color: green;
      }
    }
    /*   end min-width 900 */

 
/*   ---------------------------- */  
    @media (min-width: 1200px){
       /* laptop */
      .boxes{
        /* change grid columns */
        grid-template-columns: repeat(4,1fr );
      }
      
      .box{
        background-color: blue;
      }
     
    }
    /*   end min-width 1200 */
  
/*   ---------------------------- */
    @media (min-width: 1800px){
       /* desktop */
      .boxes{
        /* change grid columns */
      }
      
      .box{
        background-color: violet;
      }
      
    }
    /*   end min-width 1800 */

 /* 
    END MEDIA QUERIES
 ================================================================ */
              
            
!

JS

              
                
              
            
!
999px

Console