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

              
                <div class="wrapper">
	<nav id="navbar">
		<header class="nav-header">CSS Grid Layout</header>
		<ul>
			<li><a class="nav-link nav-link-first" href="#grid_layout">Grid Layout</a></li>
			<li><a class="nav-link" href="#browser_support">Browser Support</a></li>
			<li><a class="nav-link" href="#grid_elements">Grid Elements</a></li>
			<li><a class="nav-link" href="#display_property">Display Property</a></li>
			<li><a class="nav-link" href="#grid_columns">Grid Columns</a></li>
			<li><a class="nav-link" href="#grid_rows">Grid Rows</a></li>
			<li><a class="nav-link" href="#grid_gaps">Grid Gaps</a></li>
			<li><a class="nav-link" href="#grid_lines">Grid Lines</a></li>
			<li><a class="nav-link nav-link-last" href="#references">References</a></li>
		</ul>
	</nav>

	<main id="main-doc">
		<section class="main-section" id="grid_layout">
			<header class="title">Grid Layout</header>
			<p>The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.</p>
			<p>Like tables, grid layout enables 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. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.</p>
		</section>

		<section class="main-section" id="browser_support">
			<header>Browser Support</header>
			<p>Other than in Internet Explorer, CSS Grid Layout is unprefixed in Safari, Chrome, Opera, Firefox and Edge. Support for all the properties and values detailed in these guides is interoperable across browsers. This means that if you write some Grid Layout code in Firefox, it should work in the same way in Chrome. This is no longer an experimental specification, and you are safe to use it in production.</p>
		</section>

		<section class="main-section" id="grid_elements">
			<header class="title">Grid Elements</header>
			<p>A grid layout consists of a parent element, with one or more child elements.</p>
			<pre><code>&#60;div class="grid-container"&#62;
	&#60;div class="grid-item"&#62;1&#60;/div&#62;
	&#60;div class="grid-item"&#62;2&#60;/div&#62;
	&#60;div class="grid-item"&#62;3&#60;/div&#62;
	&#60;div class="grid-item"&#62;4&#60;/div&#62;
	&#60;div class="grid-item"&#62;5&#60;/div&#62;
	&#60;div class="grid-item"&#62;6&#60;/div&#62;
	&#60;div class="grid-item"&#62;7&#60;/div&#62;
	&#60;div class="grid-item"&#62;8&#60;/div&#62;
	&#60;div class="grid-item"&#62;9&#60;/div&#62;
&#60;/div&#62;</code></pre>
		</section>

		<section class="main-section" id="display_property">
			<header>Display Property</header>
			<p>We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this, all direct children of that element become grid items.</p>
			<pre><code>.grid-container {
&#9;display: grid;
}<br>
.grid-container {
&#9;display: inline-grid;
}</code></pre>
		</section>

		<section class="main-section" id="grid_columns">
			<header>Grid Columns</header>
			<p>A grid column is a vertical track in a CSS Grid Layout, and is the space between two vertical grid lines. It is defined by the grid-template-columns property or in the shorthand grid or grid-template properties.</p>
			<p>In addition, columns may be created in the implicit grid when items are placed outside of columns created in the explicit grid. These columns will be auto-sized by default, or can have a size specified with the grid-auto-columns property. When working with alignment in CSS Grid Layout, the axis down which columns run is known as the block, or column, axis.</p>
		</section>

		<section class="main-section" id="grid_rows">
			<header>Grid Rows</header>
			<p>A grid row is a horizontal track in a CSS Grid Layout, that is the space between two horizontal grid lines. It is defined by the grid-template-rows property or in the shorthand grid or grid-template properties.</p>
			<p>In addition, rows may be created in the implicit grid when items are placed outside of rows created in the explicit grid. These rows will be auto sized by default, or can have a size specified with the grid-auto-rows property. When working with alignment in CSS Grid Layout, the axis along which rows run is known as the inline, or row, axis.</p>
		</section>

		<section class="main-section" id="grid_gaps">
			<header>Grid Gaps</header>
			<p>The spaces between each column/row are called gaps. Instead of creating empty grid tracks or trying to hack things up with margins, grid-gap is a property available on grid containers that makes it easy to create gutters in your CSS Grid layouts.</p>
			<p>You can adjust the gap size by using one of the following properties:</p>
			<ul>
				<li>grid-column-gap</li>
				<li>grid-row-gap</li>
				<li>grid-gap</li>
			</ul>
			<p>The grid-column-gap property sets the gap between the columns:</p>
			<pre><code>.grid-container {
	display: grid;
	grid-column-gap: 50px;
}</code></pre>
			<p>The grid-row-gap property sets the gap between the rows:</p>
			<pre><code>.grid-container {
	display: grid;
	grid-row-gap: 50px;
}</code></pre>
			<p>The grid-gap property is a shorthand property for the grid-column-gap and the grid-row-gap
				properties:
			</p>
			<pre><code>.grid-container {
	display: grid;
	grid-gap: 50px 100px;
}</code></pre>
			<p>The grid-gap property can also be used to set both the row gap and the column gap in one value:</p>
			<pre><code>.grid-container {
	display: grid;
	grid-gap: 50px;
}</code><pre>
			</section>

			<section class="main-section" id="grid_lines">
				<header>Grid Lines</header>
				<p>The lines between columns are called column lines and the lines between rows are called row lines, they are created when you define tracks in the explicit grid.</p>
				<p>A grid item starting at column line 1, that ends on column line 3:</p>
				<pre><code>.item1 {
	grid-column-start: 1;
	grid-column-end: 3;
}</code><pre>
			</section>

			<section class="main-section" id="references">
				<header>References</header>
				<p>All content taken from:</p>
				<ul>
					<li><a href="https://www.w3schools.com/css/css_grid.asp" target="_blank" class="ref">w3schools</a></li>
					<li><a href="https://developer.mozilla.org/en-US/" target="_blank" class="ref">MDN</a></li>
				</ul>
			</section>
		</main>
	</div>
	<footer>
		<div id="name" class="name">
			<p>Coded by Stephan Lamoureux for <a href="https://www.freecodecamp.org/slamoureux" target="_blank"> freeCodeCamp <i class="fa fa-free-code-camp"></i></a></p>
		</div>
		<div class="my-links">
		  <a href="https://github.com/slamoureux/technical-doc" target="_blank" class="footer-link">
			<i class="fa fa-github fa-2x" aria-hidden="true"></i></a>
		  <a href="https://codepen.io/s-lamoureux/full/zYGymam" target="_blank" class="footer-link">
			<i class="fa fa-codepen fa-2x" aria-hidden="true"></i></a>
		  <a href="https://twitter.com/sa_lamoureux" target="_blank" class="footer-link">
			<i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a>
		</div>
	  </footer>
              
            
!

CSS

              
                body {
	font-family: "Open Sans", Arial, Helvetica;
	background-color: white;
	margin: 0;
}

.wrapper {
	display: grid;
	grid-template-columns: minmax(200px, auto) 1fr;
	grid-template-areas: "navbar main";
	grid-column-gap: 100px;
}

/* Navbar */

nav {
	grid-area: navbar;
	position: fixed;
	border-bottom: 1px solid slategray;
	border-right: 2px solid slategray;
	border-bottom-right-radius: 1rem;
	border-top-right-radius: 1rem;
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

nav li {
	width: 100%;
	border-top: 1px solid slategray;
}

nav li:nth-child(-n + 8) {
	background-color: #2f3341;
}

.nav-link,
.nav-link-first,
.nav-link-last {
	display: block;
	padding: 10px 0 10px 20px;
	margin: 0;
	text-decoration: none;
	font-size: 1.1rem;
}

.nav-link:link,
.nav-link-first:link,
.nav-link-last:link,
.nav-link-first:visited,
.nav-link-last:visited,
.nav-link:visited {
	color: white;
}

.nav-link:hover,
.nav-link-first:hover {
	color: white;
	background-color: steelblue;
}

.nav-link-last {
	background-color: #2f3341;
	border-bottom-right-radius: 0.78rem;
}

.nav-link-last:hover {
	color: white;
	background-color: steelblue;
	border-bottom-right-radius: 0.78rem;
}

header {
	font-size: 1.3rem;
	font-weight: thin;
}

.nav-header {
	font-size: 1.5rem;
	padding: 20px;
	font-weight: normal;
	color: steelblue;
	background-color: #a3be8c;
	color: white;
	border-top-right-radius: 0.78rem;
}

/* Main Section */

main {
	grid-area: main;
	padding: 25px 50px 0 50px;
	margin-right: 12rem;
}

section {
	padding-bottom: 10px;
}

section header {
	padding-bottom: 10px;
}

section p {
	padding: 0 20px;
}

section ul {
	list-style-type: square;
	margin: 20px 10px;
}

section li {
	margin: 15px 0 0 20px;
}

code {
	white-space: pre;
	display: block;
	border-radius: 5px;
	line-height: 1.5;
	margin: 20px 20px 20px 35px;
	padding: 10px 0 10px 20px;
}

/* References */

.ref:link,
.ref:visited,
.ref:active {
	color: steelblue;
	text-decoration: none;
}

.ref:hover {
	text-decoration: underline;
	color: steelblue;
}

/* Footer */

footer {
	padding-top: 5px;
}

footer p {
	margin: 0;
	padding: 0;
}

footer a:link,
footer a:visited,
footer a:active {
	color: black;
	text-decoration: none;
}

footer a:hover {
	color: steelblue;
}

.name {
	color: black;
	text-align: center;
	margin: 20px 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}

.my-links {
	padding-bottom: 20px;
	text-align: center;
}

.footer-link {
	padding: 0 15px 0 15px;
}

.footer-link:link,
.footer-link:visited,
.footer-link:active {
	color: black;
}

.footer-link:hover {
	color: steelblue;
}

@media screen and (max-width: 767px) {
	.wrapper {
		grid-template-columns: 1fr;
		grid-template-areas: "navbar" "main";
		grid-gap: 20px;
	}

	main {
		padding: 0 20px;
		margin: 0;
	}

	nav {
		position: inherit;
		border-right: none;
		height: 220px;
		overflow-x: hidden;
		overflow-y: auto;
		border-bottom-right-radius: 0;
		border-top-right-radius: 0;
	}

	.nav-header {
		text-align: center;
		border-top-right-radius: 0;
	}

	nav li {
		text-align: center;
	}

	.nav-link,
	.nav-link-first,
	.nav-link-last {
		padding: 10px 0;
	}

	.nav-link-last {
		border-bottom-right-radius: 0;
	}
}

@media screen and (max-width: 1023px) {
	.wrapper {
		grid-column-gap: 40px;
	}

	main {
		padding: 25px 20px 0 20px;
		margin: 0;
	}
}

              
            
!

JS

              
                
              
            
!
999px

Console