Documentation - CSS Grid - German Bobadilla

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

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

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

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions