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. 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

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

              
                <!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Style study</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/main.css">
  <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,400i,700,900" rel="stylesheet">

</head>

<body class="grid-container">
  <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

  <!-- <header class="header">
                       
                </header> -->
  <main class="main grid-plate">

    <div class="copy-grid-left border-container">
      <div class="copy-layout-bg-1 border-inner"></div>
      <div class="copy-layout-bg-2 border-inner"></div>
      <!-- <div class="spanner"><img src="https://picsum.photos/300/300/?random" alt="image" width="100%"></div> -->
    </div>
    <div class="copy-grid-right border-container">
      <div class="copy-layout-bg-1 border-inner"></div>
      <div class="copy-layout-bg-2 border-inner"></div>
    </div>
    <div class="main-title spanner">
      <h1 class="title">CSS GRID AND SO CAN YOU!</h1>
    </div>
    <div class="main-subtitle spanner head-spacing"><span class="subtitle">Resize the browser, or don't.  ¯\_(ツ)_/¯</span></div>
    <div class="copy col-1">

      <div class="spanner">
        <p><span class=firstcharacter>C</span>limb leg. My left donut is missing, as is my right run in circles, but meow loudly just to annoy owners for use lap as chair, for ask to go outside and ask to come inside and ask to go outside and ask to come
          inside but scoot butt on the rug. Curl into a furry donut meowzer meow to be let in. The fat cat sat on the mat bat away with paws eat grass, throw it back up, take a big fluffing bleep so claw drapes, yet shake treat bag try to jump onto
          window and fall while scratching at wall yet litter kitter kitty litty little kitten big roar roar feed me. Scream for no reason at 4 am drink water out of the faucet demand to be let outside at once, and expect owner to wait for me as i think
          about it chase laser and spend all night ensuring people don't sleep sleep all day this cat happen now, it was too purr-fect!!! but sit in box. Headbutt owner's knee friends are not food and sleep on dog bed, force dog to sleep on floor but
          meow to be let out destroy the blinds but knock dish off table head butt cant eat out of my own dish. Caticus cuteicus groom forever, stretch tongue and leave it slightly out, blep catty ipsum decide to want nothing to do with my owner today.
          </p>
      </div>

      <div class="col-2-only">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
      </div>
      <!-- Two Column Grid -->
      <div class="spanner grid-plate grid-plate-2">
        <div class="col-1-only">
          <img src="https://picsum.photos/300/300/?random" alt="image" width="100%">
        </div>
        <div class="col-2-only">
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
            quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
            eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
            reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        </div>
      </div>
      <!-- Three Column Grid -->
      <div class="spanner grid-plate grid-plate-3">
        <div class="col-1-only">
          <img src="https://picsum.photos/300/300/?random" alt="image" width="100%">
        </div>
        <div class="col-2-only">
          <img src="https://picsum.photos/300/300/?random" alt="image" width="100%">
        </div>
        <div class="col-3-only">
          <img src="https://picsum.photos/300/300/?random" alt="image" width="100%">
        </div>
      </div>

      <div class="col-1-only">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
          quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
          eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
          qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
      </div>
    </div>
    <div class="copy col-2">

      <img src="https://picsum.photos/300/300/?random" alt="image" width="100%">
      <img src="https://picsum.photos/300/300/?random" alt="image" width="100%">
      <img src="https://picsum.photos/300/300/?random" alt="image" width="100%">
      <img src="https://picsum.photos/300/300/?random" alt="image" width="100%">
      <img src="https://picsum.photos/300/300/?random" alt="image" width="100%">

    </div>
  </main>
  <aside class="aside-1"></aside>
  <aside class="aside-2"></aside>
  <footer class="footer"></footer>

  <script src="js/scripts.js" async defer></script>
</body>

</html>
              
            
!

CSS

              
                /* Grid */
.header {
    grid-area: header; 
}
.footer {
    grid-area: footer; 
}
.main {
    grid-area: main; 
}
.header {
    margin:2rem 0 2rem;
    padding:1rem;
    border:1px solid rgb(255, 204, 204);;
}
/* Grid Item Controls */
.copy {
  position: relative;
}
/* Grid Background Styling */
.copy-layout-bg-1 {
    border-right: 1px solid rgb(255, 204, 204);
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
/*     position:absolute; */
    width:100%;
    height:100%;
    grid-column: 1 / 1;
    z-index: -1;
  }
.copy-layout-bg-2 {
    border-left: 1px solid rgb(255, 204, 204);
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
/*     position:absolute; */
    width:100%;
    height:100%;
    grid-column: 2 / 2;
    z-index: -1;
}
.copy-grid-left {
    background:transparent;
    position: absolute;
    width: 100%;
    height: 100%;
    grid-column: 1 / 1;
    z-index: -1;
    grid-template-columns: 1fr 1fr;
    display: grid;
    grid-gap: 1em 1em;
}
.copy-grid-right {
    background:transparent;
    position: absolute;
    width: 100%;
    height: 100%;
    grid-column: 2 / 2;
    z-index: -1;
    grid-template-columns: 1fr 1fr;
    display: grid;
    grid-gap: 1em 1em;
}
/* Grid Item Configuration */

.spanner {
    grid-column: 1 / -1;
}
.grid-plate {
    position:relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 1em 1em;
    grid-template-areas: "main-title . " "main-subtitle . " "col-1 col-2";
}
.grid-plate.grid-plate-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 1em 1em;
    grid-template-areas: "col-1 col-2";
}
.grid-plate.grid-plate-3 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 1em 1em;
    grid-template-areas: "col-1 col-2 col-3";
}
.col-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em 1em;
    grid-template-areas: "col-sub-1 col-sub-2";
    grid-column: 1 / 1;
    grid-auto-rows: max-content;
}
.col-2 {
    display: grid;
    grid-area: col-2;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em 1em;
    grid-template-areas: "col-sub-1 col-sub-2";
    grid-auto-rows: max-content;
}
.col-3 {
    display: grid;
    grid-area: col-3;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em 1em;
    grid-template-areas: "col-sub-1 col-sub-2";
    grid-auto-rows: max-content;
}
.col-1-only {
    grid-column: 1 / 1;
}
.col-2-only {
    grid-column: 2 / 2;
}
.col-3-only {
    grid-column: 3 / 3;
}
/* Grid Regions */
.left {
    grid-area: left; 
}
.right {
    grid-area: right; 
}
.main-title {
    grid-area: main-title;
}
.main-subtitle {
    grid-area: main-subtitle;
}
/* .border-inner { 
    border: 1px solid rgb(230, 230, 230);
    }*/
.border-container {
    border: 1px solid rgb(230, 230, 230);
}
.grid-container {
    display: grid;
    position: relative;
    grid-template-areas: "header header header"
                        "left main right"
                        "footer footer footer";
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: 100px 
                        1fr
                        30px;
    min-height: 100vh;
    grid-gap: 1em 1em;
}
/* Visual styles */
* {
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
    counter-reset: paragraph;  
}

/* Typography */

.firstcharacter {
    color: rgb(236, 0, 0);
    float: left;
    font-family: Georgia;
    font-size: 9rem;
    line-height: 7rem;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
}
p {
    font-family: 'Merriweather', serif;
    font-weight: 300;
}
h1.title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 6em;
    margin-top: 0.25em;
    margin-bottom: 0;
    line-height: 4.9rem;
}
.subtitle {
    font-family: 'Merriweather', serif;
    font-size: 0.8em;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 0.8rem;
    display: block;
    border-bottom:4px solid black;
    height:2rem;
    font-weight: 900;
}
.title {
    border-bottom:4px solid black;
}
.rotated {
    transform: rotate(5deg); /* Equal to rotateZ(45deg) */ 
  }
.center-align {
    text-align: center;
}
.head-spacing {
    margin-bottom:1rem;
}
p:before {
    position: absolute;
    margin-top: -1.25em;
    color: #CCC;
    content: counter(paragraph);
    counter-increment: paragraph;
    font-family: 'Merriweather', serif;
}
img {
    margin-top:1em;
}

@media screen and (max-width: 1200px) {
    .col-2{
        grid-area: col-2;
        grid-template-columns: 1fr;
        grid-template-areas: "col-sub-1";
    }
}

@media screen and (max-width: 1000px) {
    
    main.grid-plate.col-2 {
        grid-template-columns: 1fr;
    }
    .subtitle {
        line-height: 1.8rem;
    }
    main.grid-plate {
        display: block;
    }
}
@media screen and (max-width: 800px) {
    .grid-container {
        grid-template-areas: "header"
                            "left"
                            "main"
                            "right"
                            "footer";
        grid-template-columns: 100%;
        grid-template-rows: 100px 
                            50px 
                            1fr
                            50px 
                            30px;
        padding: 0 2em;
    }
    h1.title {
        font-size:4rem;
        line-height: 3.25rem;
    }
    
}

@media screen and (max-width: 600px) {
    .copy div {
        grid-column: 1 / -1;
    }
    h1.title {
        font-size: 3rem;
        line-height: 2.4rem;
    }
}
@media screen and (max-width: 380px) {
    h1.title {
        font-size: 3rem;
        line-height: 2.4rem;
    }
    .grid-container {
        padding: 0 1em;
    }
   .col-1-only {
        grid-column: 1 / -1;
    }
    .col-2-only {
        grid-column: 1 / -1;
    }
    .col-3-only {
        grid-column: 1 / -1;
    }
}
              
            
!

JS

              
                
              
            
!
999px

Console