Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>
<html>

<head>
	<title>gridded</title>
</head>

<body>
	<!-- this weird bit is just decoration included
	inside the fake window, upper left-hand corner
	of the page.  Safely ignored.  -->
	<div class="titular barnone">
		<strong>o o o</strong>
	</div>
	
	<div class="titular">
	<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/534020/browser.png' alt='browser layout illustration'><h1>Understanding the CSS Grid </h1>

	</div>
	<!-- end of window decoration -->
	<br />
		<div class="announcer">
	</div>
	<div class="noted">
		<p><em>Be sure to experiment with the HTML and CSS  on this page by playing with the embedded live code hosted by codepen.io.  It will go a long way to helping you understand how grids work.</em></p>
	</div>
	<div class="noted">
	<p>I've created several different grids on this page -- that's not altogether unusual, but it does require an extra step or two to make it happen.  Here's how:  In order to distinguish between these grids in the html below, I created a generic CSS grid class, which I called <code>gField</code>.  It looks like this:</p>
		<pre>.gField {
	display: grid;
	grid-gap: 10px;
	background-color: firebrick;
}</pre>
		<p>That's a good start, but my "gField" class doesn't specify column and row layout, and what is the point of a layout grid if you aren't, you know, laying-out the content in a specific fashion?  In this case, though, I omitted them on purpose, in order to make all my grids look <em>similar</em> (all of them "firebrick" in color, and all of them with a 10px gap between the cells), but not <em>exactly</em> the same.  Since each grid layout is a bit different, I use a second class (called "EX1", "EX2", etc.) to specify a unique layout.  Here's how I defined a class called "EX1" in my .CSS file, for example:</p>
			<pre>.EX1 {
	grid-template-columns: 133px 133px 133px;
}</pre>
		<p>Now, When I want to create my grid container for the first example, I use this declaration in the HTML: 		
		<code>&lt;div class="gField EX1"&gt; ... &lt;/div&gt;</code>.  In effect, this says "This is the start of an container styled with both the gField and the EX1 classes." </p>
		<br />
<p>Later, when I'm ready to present my third example, the classes that I assign to that block change just a tiny bit: <code>&lt;div class="gField EX3"&gt; ... &lt;/div&gt;</code></p>
		<br />
		<p>In addition to looking at the individual examples, then, check out this page's .CSS and .HTML, too:  It's a bit more complicated than the examples, but it serves to illustrate how more complex tasks can be accomplished with grid layouts.</p> 
		
	</div>

	<!-- the "tab" class just puts a fancy
	tab on top of each of the examples.  It
	doesn't contribute otherwise to layout. -->
	<div class="tab">Example One</div>
	<div class="gField EX1">
		<div class="gBox">133px</div>
		<div class="gBox">133px</div>
		<div class="gBox">133px</div>
		<!-- close up the "gField" grid -->
	</div>

	<div class="tab">Example Two</div>
	<div class="gField EX2">
		<div class="gBox">200px</div>
		<div class="gBox">100px</div>
		<div class="gBox">20%</div>
		<!-- close up the "gField" grid -->
	</div>

	<div class="tab">Example Three</div>
	<div class="gField EX3">
		<div class="gBox">repeat(4, 15%)</div>
		<div class="gBox">...</div>
		<div class="gBox">...</div>
				<div class="gBox">...</div>
		<div class="gBox">1fr</div>


		<div class="gBox blanco">
			<p>Here's how class .EX3 is declared in the .CSS:</p><pre>
  grid-template-columns: repeat(4,15%) 1fr;</pre>
			<p>In this case, we're explicitly declaring a total of 5 columns:  The first column width is 15%.  That is repeated for a total of four times:  <code>repeat(4, 15%)</code>.  Then there is a single column that is 1 fraction: <code>1 fr</code>.  The first part means the first four columns will comprise 60% of the <em>total</em> width; that last, lonely <code>1fr</code> is left, then, to absorb the remaining width (40%).</p><br />
			<p> Units like <code>fr</code> are <em>always</em> relative, and so <u>they are invaluable when designing responsive websites</u>. We'll make greater use of them presently.</p>

		</div>
		<div class="gBox blanco">
			<p>Here's another thing about class .EX3:  Like some of our other examples, it never mentions rows.  This is strategic on our part, and makes use of both the <strong>Explicit Grid</strong>&trade; (the one we declare) and the <strong>Implicit Grid</strong> &reg; (the one the browser builds in support of our declarations).  By not specifying row height, or even how many rows I want, the potential number of rows is infinite, and the row height will vary with the content length of each row.  However, when I specify --</p>
			<pre>
  grid-template-rows: 1fr 1fr 1fr;</pre>
			<p>-- notice how each of the rows is now made equal in height to the others.  The fr (fraction) unit of measure is of limited use on its own, but when we can work with several fr at the same time, their relationship becomes very useful.  In this case, <code>1fr 1fr 1fr</code> means our three rows are explicitly set to be equal in height.  It doesn't dictate what that height should be -- in this case, the greatest height is adopted as the height of each row.
		</div>
			<!-- close up the "gField" grid -->
		</div>
	

	<div class="tab">Example Four A</div>
	<div class="gField EX4A">
		<div class="gBox cRed">RED</div>
		<div class="gBox cOra">ORANGE</div>
		<div class="gBox cYel">YELLOW</div>
		<div class="gBox cGre">GREEN</div>
		<div class="gBox cBlu">BLUE</div>
		<div class="gBox cInd">INDIGO</div>
		<div class="gBox cVio">VIOLET</div>
		<div class="gBox blanco">These last two rows share a class that specifies:<br /> <br />&nbsp;&nbsp;&nbsp; <code>grid-column-start: 1;</code> <br /><br />Since two <code>div</code>s can't <em>both</em> start on grid-column 1, the <code>div</code> that comprises the cell below this one got forced down into that next (and last) row.</div>
		<div class="gBox blanco">See how that middle row grows taller and taller to accomodate the content?  But notice how the first row grows taller, and this row does too, to the point where there is a lot of unused space?  Why?  Check the CSS!  In the <code>"blanco"</code> class, we declare <code>grid-template-rows: 1fr 1fr 1fr;</code>  Those three <code>1fr</code> row heights tell the browser that each row in this grid container must be the same height.</div>
		<!-- close up the "gField" grid -->
	</div>

	<div class="tab">Example Four B</div>
	<div class="gField EX4B">
		<div class="gBox cRed">RED</div>
		<div class="gBox cOra">ORANGE</div>
		<div class="gBox cYel">YELLOW</div>
		<div class="gBox cGre">GREEN</div>
		<div class="gBox cBlu">BLUE</div>
		<div class="gBox cInd">INDIGO</div>
		<div class="gBox cVio">VIOLET</div>
		<div class="gBox notesA">
			<p>This example, contained in the grid classed "gField EX4B", makes use of the column-start, column-stop syntax.  It's clunky (we'll adopt a terrific shortcut next week), but once you understand how it "sees" your layout, it is awesome.  And it means (finally!) that our content is <em>actually</em> unmoored from our pasteup:  The order in which our text occurs inside our HTML file no longer determines the order in which it appears on-screen.</p>		<br />	
			<p>In the column on the right, you'll find two of the classes that defined a couple of the cells in this grid.  The grammar is a bit counter-intuitive, but here's one way to think of it.  On the right (in a slightly simplified form from how it appears inside this file), take a look at the <code>.BLUE</code> class from our .CSS file.  Loosely translated, it means this:</p><blockquote>Horizontally, the BLUE-class cell starts in column 4 starts, but ends <u>before</u> it gets to column 6; vertically, it comprises rows 1 and 2, but ends <u>before</u> it gets to row 3.</blockquote>
			<!-- close up this specific cell -->
		</div>
<div class="EX4B notesB"><pre>.RED {
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 2;
}</pre>
<pre>.BLUE {
	grid-column-start: 4;
	grid-column-end: 6;
	grid-row-start: 1;
	grid-row-end: 3;
}</pre>
			
		</div>
		<!-- close up the "gField" grid -->
	</div>
	<div> <br /> </div>
	<div> <br /> </div>

	<div class="license">
	<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.  <br /><br />2019 Garrison LeMasters, Miami University, Oxford, Ohio.
	</div>
	
</body>
</html>
            
          
!
            
              html {
	width:92.5%;
	margin:0 auto;
}
body {
	width:92.5%;
	margin: 0 auto;
	background-color: deepskyblue;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-size: .9em;
}

.announcer{
	display:none;
	font-size:150%;
	margin-top:-4px;
	margin-bottom:20px;
	margin-left:5px;
	color:black;

}

h1{
	margin:0px;
}


.titular{
	background-color:gold;
	padding:10px;
	border-radius:2px;
	width:210px;
	margin:-3px 0 0 0;
	letter-spacing: -1px;
	border:3px solid black;
}

.barnone {
	margin:25px 0 0 0px;
}

.titular img {
	width:90px;
	margin-bottom:15px;
}


p {
	margin: 0;
	padding:0;
}

.noted {
	background-color:white;
	letter-spacing:0.3px;
	padding:12px;
	padding-left:33px;
	padding-right:25px;
	margin:10px 0px 5% 5%;
	border-radius:8px;
	line-height:150%;
	font-weight:400;
	font-size:1.15em;
	font-family:Bodoni,Georgia,Times,"Times New Roman";
}

.noted pre{
	line-height:1.5em;
	background-color:whitesmoke;
	padding:10px;
	width:75%;
	border-radius:7px;
}

pre:first-line {
	font-weight:900;
	font-family:monospace;
	font-size:110%;
	color:firebrick;
}

code {
	background-color:black;
	color:orange;
	font-family:monaco,monospace;
	padding:1px 5px; /* top&bottom left&right */
	border-radius:4px;
}

.gField code{
	background-color:rebeccapurple;
	color:white;
}

.tab {
	width: 125px;
	padding: 10px;
	color: gold;
	background-color: firebrick;
	margin-top: 70px;
	border-radius: 8px 8px 0px 0px;
}

.gField {
	display: grid;
	width: 100%;
	margin: 0 auto;
	padding: 10px;
	grid-gap: 10px;
	background-color: firebrick;
}

.gBox {
	color: black;
	background-color: gold;
	border-radius: 6px;
	padding: 10px;
	font-size: 1.1em;
}

.gBox p {
	font-weight: 400;
}

.EX1 {
	grid-template-columns: 133px 133px 133px;
}

.EX2 {
	grid-template-columns: 200px 100px 20%;
}

.EX3 {
	grid-template-columns: repeat(4,15%) 1fr;
	grid-template-rows: 1fr 1fr 1fr;
}

.EX4A {
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows:1fr 1fr 1fr;
	grid-column-gap:0px;
}
.EX4A .gBox {
	border-radius: 0px;
}

.cRed{
	background-color: red;
}

.cOra{
	background-color: orange;
}

.cYel{
	background-color: yellow;
}

.cGre{
	background-color: green;
}

.cBlu{
	background-color:blue;
}
.cInd{
	background-color:indigo;
}
.cVio{
	background-color:violet;
}

.blanco {
	grid-column-start:1;
	grid-column-end:8;
	background:floralwhite;
	line-height:150%;
	border-radius:9px;
}

.EX4B {
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows:1fr 1fr 1fr 6fr;
}

.EX4B .cRed {
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 2;
}

.EX4B .cOra {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 4;
}

.EX4B .cYel {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
}

.EX4B .cGre {
	grid-column-start: 3;
	grid-column-end: 5;
	grid-row-start: 3;
	grid-row-end: 4;
}

.EX4B .cBlu {
	grid-column-start: 4;
	grid-column-end: 6;
	grid-row-start: 1;
	grid-row-end: 3;
}

.EX4B .cInd {
	grid-column-start: 6;
	grid-column-end: 7;
	grid-row-start: 1;
	grid-row-end: 4;
}

.EX4B .cVio {
	grid-column-start: 7;
	grid-column-end: 8;
	grid-row-start: 3;
	grid-row-end: 4;
}
.EX4B .notesA{
	grid-column-start:1;
	grid-column-end:5;
}

.EX4B .notesB {
	padding:10px;
	background-color:ivory;
	grid-column-start:5;
	grid-column-end:8;
}

.license {
	background-color:lightblue;
	margin-bottom: 20px;
	margin-top:50px;
	padding:6px;
	font-weight:400;
	width:50%;
	font-size:0.75em;
	border-radius:5px;
}
            
          
!
            
              
two seperate grids
 first grid 4x4
 	blue
 
 second grid 3x3
   red
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console