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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<input type="checkbox" id="dark" name="dark">
<input type="checkbox" id="check">
<nav for="dark" id="navbar" class="set">
  <header id="nav-header">
    <h1>Learn CSS Grid</h1>
  </header>
  <ul>
    <li><a href="#The_Grid" class="nav-link">The Grid</a></li>
    <li><a href="#Grid_Columns" class="nav-link">Grid Columns</a></li>
    <li><a href="#Grid_Rows" class="nav-link">Grid Rows</a></li>
    <li><a href="#Grid_Fractions" class="nav-link">Grid Fractions</a></li>
    <li><a href="#Grid_Percentages" class="nav-link">Grid Percentages</a></li>
    <li><a href="#Grid_Mobile" class="nav-link">Grid Mobile</a></li>
    <li><a href="#Grid_Lines" class="nav-link">Grid Lines</a></li>
    <li><a href="#Grid_Areas" class="nav-link">Grid Areas</a></li>
  </ul>
</nav>
<div class="header">
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>
</div>

<main id="main-doc">
  <h1>MDN Grid System</h1>
  <section class="main-section" id="The_Grid">
    <header>
      <h1>The Grid</h1>
    </header>
    <label for="check"><span id="menu" class="material-icons">menu</span></label>
    <article class="doc-content">
      <p>
        The grid CSS property is a shorthand property that sets all of the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), and all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), in a single declaration.
      </p>
      <p>
        You can only specify the explicit or the implicit grid properties in a single grid declaration. The sub-properties you don’t specify are set to their initial value, as normal for shorthands. Also, the gutter properties are NOT reset by this shorthand.
      </p>
      <p>
        Like tables, grid layout <code>enables</code> an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
    </article>
    <aside class="doc-code">
      <pre>
          <code>
     /* <'grid-template'> values */
    grid: none;
    grid: "a" 100px "b" 1fr;
    grid: [linename1] "a" 100px [linename2];
    grid: "a" 200px "b" min-content;
    grid: "a" minmax(100px, max-content) "b" 20%;
    grid: 100px / 200px;
    grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

    /* <'grid-template-rows'> /
       [ auto-flow && dense? ] <'grid-auto-columns'>? values */
    grid: 200px / auto-flow;
    grid: 30% / auto-flow dense;
    grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
    grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

    /* [ auto-flow && dense? ] <'grid-auto-rows'>? /
       <'grid-template-columns'> values */
    grid: auto-flow / 200px;
    grid: auto-flow dense / 30%;
    grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
    grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

    /* Global values */
    grid: inherit;
    grid: initial;
    grid: unset;
          </code>
        </pre>
    </aside>
    <div class="doc-list">
      <ul>
        <li>grid-template</li>
        <li>grid-template-rows'> / [ auto-flow && dense? ] 'grid-auto-columns</li>
        <li>auto-flow && dense?</li>
        <li>rid-auto-rows</li>
        <li>grid-template-columns</li>
      </ul>
    </div>
  </section>
  <section id="Grid_Columns" class="main-section">
    <header>
      <h1>Grid Columns</h1>
    </header>
    <article class="doc-content">
      <p>
        The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.
      </p>
      <p>
        Is a keyword meaning that there is no explicit grid. Any columns will be implicitly generated and their size will be determined by the grid-auto-columns property.
      </p>
      <p>
        Is a non-negative <percentage> value relative to the inline size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as auto.
          The intrinsic size contributions of the track may be adjusted to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.
      </p>
    </article>
    <aside class="doc-code">
      <pre>
          <code>
       /* Keyword value */
  grid-template-columns: none;

  /* <track-list> values */
  grid-template-columns: 100px 1fr;
  grid-template-columns: [linename] 100px;
  grid-template-columns: [linename1] 100px [linename2 linename3];
  grid-template-columns: minmax(100px, 1fr);
  grid-template-columns: fit-content(40%);
  grid-template-columns: repeat(3, 200px);
  grid-template-columns: subgrid;

  /* <auto-track-list> values */
  grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
  grid-template-columns: minmax(100px, max-content)
                         repeat(auto-fill, 200px) 20%;
  grid-template-columns: [linename1] 100px [linename2]
                         repeat(auto-fit, [linename3 linename4] 300px)
                         100px;
  grid-template-columns: [linename1 linename2] 100px
                         repeat(auto-fit, [linename1] 300px) [linename3];

  /* Global values */
  grid-template-columns: inherit;
  grid-template-columns: initial;
  grid-template-columns: unset;
            </code>
        </pre>
    </aside>
    <div class="doc-list">
      <ul>
        <li>Subgrid</li>
        <li>fit-content</li>
        <li>repeat()</li>
        <li>min-content</li>
        <li>minmax</li>
      </ul>
    </div>
  </section>
  <section id="Grid_Rows" class="main-section">
    <header>
      <h1>Grid Rows</h1>
    </header>
    <article class="doc-content">
      <p>
        Like tables, grid layout <code>enables</code> an author to align <code>elements</code> into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
      <p>
        Like tables, grid layout enables <code>function()</code> an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
      <p>
        Like tables, grid layout <code>enables</code> an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
    </article>
    <aside class="doc-code">
      <pre>
          <code>
     body {
            
     }
          </code>
        </pre>
    </aside>
    <div class="doc-list">
      <ul>
        <li>List 1</li>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
      </ul>
    </div>
  </section>
  <section id="Grid_Fractions" class="main-section">
    <header>
      <h1>Grid Franctions</h1>
    </header>
    <article class="doc-content">
      <p>
        Like tables, grid layout <code>enables</code> an author to align <code>elements</code> into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
      <p>
        Like tables, grid layout enables <code>function()</code> an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
      <p>
        Like tables, grid layout <code>enables</code> an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
    </article>
    <aside class="doc-code">
      <pre>
          <code>
     body {
            
     }
          </code>
        </pre>
    </aside>
    <div class="doc-list">
      <ul>
        <li>List 1</li>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
      </ul>
    </div>
  </section>
  <section id="Grid_Percentages" class="main-section">
    <header>
      <h1>Grid Percentages</h1>
    </header>
    <article class="doc-content">
      <p>
        Like tables, grid layout <code>enables</code> an author to align <code>elements</code> into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
      <p>
        Like tables, grid layout enables <code>function()</code> an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
      <p>
        Like tables, grid layout <code>enables</code> an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
    </article>
    <aside class="doc-code">
      <pre>
          <code>
     body {
            
     }
          </code>
        </pre>
    </aside>
    <div class="doc-list">
      <ul>
        <li>List 1</li>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
      </ul>
    </div>
  </section>
  <section id="Grid_Mobile" class="main-section">
    <header>
      <h1>Grid Mobile</h1>
    </header>
    <article class="doc-content">
      <p>
        Like tables, grid layout <code>enables</code> an author to align <code>elements</code> into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
      <p>
        Like tables, grid layout enables <code>function()</code> an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
      <p>
        Like tables, grid layout <code>enables</code> an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
    </article>
    <aside class="doc-code">
      <pre>
          <code>
     body {
            
     }
          </code>
        </pre>
    </aside>
    <div class="doc-list">
      <ul>
        <li>List 1</li>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
      </ul>
    </div>
  </section>
  <section id="Grid_Lines" class="main-section">
    <header>
      <h1>Grid Lines</h1>
    </header>
    <article class="doc-content">
      <p>
        Like tables, grid layout <code>enables</code> an author to align <code>elements</code> into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
      <p>
        Like tables, grid layout enables <code>function()</code> an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
      <p>
        Like tables, grid layout <code>enables</code> an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
    </article>
    <aside class="doc-code">
      <pre>
          <code>
     body {
            
     }
          </code>
        </pre>
    </aside>
    <div class="doc-list">
      <ul>
        <li>List 1</li>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
      </ul>
    </div>
  </section>
  <section id="Grid_Areas" class="main-section">
    <header>
      <h1>Grid Areas</h1>
    </header>
    <article class="doc-content">
      <p>
        Like tables, grid layout <code>enables</code> an author to align <code>elements</code> into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
      <p>
        Like tables, grid layout enables <code>function()</code> an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
      <p>
        Like tables, grid layout <code>enables</code> an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables.
      </p>
    </article>
    <aside class="doc-code">
      <pre>
          <code>
  header {
    grid-area: header;    
  }
     
  main {
    grid-area: main;    
  }
     </code>
 </pre>
    </aside>
    <div class="doc-list">
      <ul>
        <li>List 1</li>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
      </ul>
    </div>
  </section>
</main>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");

:root {
  --dark-bg: #1e1f26;
  --dark-font: #1e1f26;
  --light-bg: #fefefe;
  --light-font: #fefefe;
  --central-color: #f5f5f5;
  --accent-color: #dedede;
}

html {
  font-size: 100%;
}

/* Body */

body {
  padding: 0;
  margin: 0;
  font-family: Lato;
  transition: 1s;
}

.darken {
  background-color: var(--dark-bg);
}

/* Changing Pre Code Colors */

/* Progress bar */

.header {
  position: fixed;
  top: 0;
  z-index: 4;
  width: 100%;
  height: 10px;
  background-color: transparent;
}

.progress-container {
  width: 100%;
  height: 5px;
  background: transparent;
}

.progress-bar {
  height: 5px;
  background: #0ea5e6;
  width: 0%;
}

/* Navbar and toggle to open and close it */

#navbar {
  position: fixed;
}

input[type="checkbox"] {
  display: none;
}

#dark {
  display: block;
  z-index: 5;
  position: fixed;
  bottom: 10px;
  left: 10px;
}

#dark:checked ~ body {
  background-color: var(--dark-bg);
  color: var(--light-font);
}

#dark:checked ~ #main-doc {
  background-color: var(--dark-bg);
  color: var(--light-font);
}

#dark:checked ~ nav {
  background-color: var(--dark-bg);
}

input[type="checkbox"] {
  cursor: pointer;
  width: 35px;
  height: 20px;
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  background: var(--dark-bg);
  border-radius: 40px;
  outline: none;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.5s;
}

input:checked[type="checkbox"] {
  background: #0ea5e6;
}

input[type="checkbox"]:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  top: 0;
  left: 0;
  background: white;
  transform: scale(1.1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: 0.5s;
}

input:checked[type="checkbox"]:before {
  background: white;
  left: 20px;
}

#dark:checked ~ nav h1 {
  color: var(--light-font);
}

#dark:checked ~ nav ul li a {
  background-color: var(--dark-bg);
  color: var(--light-font);
}

#dark:checked ~ nav ul li a:hover {
  background-color: var(--light-font);
  color: var(--dark-bg);
}

nav {
  background-color: var(--central-color);
  -webkit-box-shadow: 4px 1px 9px 0px rgba(161, 158, 161, 1);
  -moz-box-shadow: 4px 1px 9px 0px rgba(161, 158, 161, 1);
  box-shadow: 4px 1px 9px 0px rgba(161, 158, 161, 1);
  width: 275px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: 1s;
  transition-property: margin-left;
  z-index: 3;
}

nav header h1 {
  padding: 20px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  border-bottom: 1px solid var(--light-font);
}

nav ul li a {
  display: block;
  padding: 20px;
  background-color: var(--accent-color);
  margin: 5px;
  text-decoration: none;
  color: var(--dark-font);
  transition-property: color;
  transition: 0.3s;
}

nav ul li a:hover {
  color: var(--light-font);
  background-color: var(--dark-bg);
}

#check:checked ~ nav {
  margin-left: -280px;
}

#check:checked ~ #main-doc {
  margin-left: 70px;
  width: 80%;
}

/* Menu icon on the right to open and close the navbar */

#menu {
  position: fixed;
  top: 15px;
  right: 15px;
  cursor: pointer;
}

/* Main section with the text */

#main-doc {
  margin-left: 340px;
  padding: 1rem 3rem 0 0;
  text-align: justify;
  transition: 1s;
  line-height: 1.8;
  position: relative;
}

#main-doc > section > header {
  margin-top: 15px;
}

#main-section > header {
  margin-top: 15px;
}

/* Code blocks pre */

pre {
  background: #dedede;
  border: 1px solid #ddd;
  border-left: 3px solid var(--accent-color);
  color: #e65800;
  page-break-inside: avoid;
  font-family: monospace;
  font-size: 15px;
  line-height: 1.2;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1em 1.5em;
  display: block;
  word-wrap: break-word;
}

.codeblock {
  background-color: var(--dark-bg);
}

/* Media queries for tablets and mobile. */

@media (max-width: 768px) {
  nav {
    display: none;
    transition: 1s;
    transition-property: width;
  }
  #main-doc {
    margin-left: 50px;
    font-size: 110%;
  }
  #menu {
    display: block;
  }
  #check:checked ~ nav {
    display: block;
    margin-left: 0;
    width: 200px;
    transition: 1s;
  }
  #check:checked ~ #main-doc {
    margin-left: 220px;
  }
}

              
            
!

JS

              
                // Reading signal

window.onscroll = function () {
  scrolling();
};

function scrolling() {
  const windowScrolling =
    document.body.scrollTop || document.documentElement.scrollTop;
  const height =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight;
  var scrolled = (windowScrolling / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

// This toggles the bg, because a body is never children of a checkbox

document.getElementById("dark").addEventListener("click", letItBeBody);

function letItBeBody() {
  document.querySelector("body").classList.toggle("darken");
}

// Also it changes the codeblock background.

const dark = document
  .getElementById("dark")
  .addEventListener("click", letItBeLights);
const pres = document.getElementsByTagName("pre");
function letItBeLights() {
  for (var i = 0; i < pres.length; i++) {
    pres[i].classList.toggle("codeblock");
  }
}

              
            
!
999px

Console