<![CDATA[<!DOCTYPE HTML>
<html>
<head>
<title>grid.html</title>
<style type = "text/css">
.container { display: grid;
border: thick solid;
width: 500px;
height: 500px; }
.item { border: inherit;
color: white;
font-size: 2em;
border-color: red;
background-color: pink; }
/*** FIGURE 1 ***/
.c1 { grid-template-rows: 100px 100px 100px 200px;
grid-template-columns: 100px 100px 100px 200px; }
.c1 .item-1 { grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2; }
.c1 .item-2 { grid-row: 1 / 2;
grid-column: 2 / 5; }
.c1 .item-3 { grid-area: 2 / 1 / 4 / 5; }
/*** FIGURE 2 ***/
.c2 { grid-template-rows: 100px 100px 100px 200px;
grid-template-columns: 100px 100px 100px 200px; }
.c2 .item-1 { grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2; }
.c2 .item-2 { grid-row: 1 / 2;
grid-column: span 3; }
.c2 .item-3 { grid-area: 2 / 1 / span 2 / span 4; }
/*** FIGURE 3 ***/
.c3 { grid-template-rows: 100px 100px 100px 200px;
grid-template-columns: 100px 100px 100px 200px; }
.c3 .item-1 { grid-row-start: -5;
grid-row-end: -4;
grid-column-start: -5;
grid-column-end: -4; }
.c3 .item-2 { grid-row: -5 / -4;
grid-column: -4 / -1; }
.c3 .item-3 { grid-area: -4 / -5 / -2 / -1; }
/*** FIGURE 4 ***/
.c4 { grid-template-rows: 100px 100px 100px 200px;
grid-template-columns: 100px 100px 100px 200px; }
.c4 .item-1 { grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 3; }
.c4 .item-2 { grid-row: 1 / 2;
grid-column: 3 / 5; }
.c4 .item-3 { grid-area: 2 / 1 / 4 / 5; }
.c4 .item-4 { grid-area: 1 / 2 / 3 / 4;
background-color: DeepSkyBlue;
border-color: blue;
z-index: 1;}
/*** FIGURE 5 ***/
.c5 { grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 2fr;
width: 57%; }
/*** FIGURE 6 ***/
.c6 { grid-template-rows: minmax(100px, 1fr) minmax(100px, 1fr)
minmax(100px, 1fr) minmax(100px, 1fr);
grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr)
minmax(100px, 1fr) minmax(200px, 2fr);
width: 57%; }
/*** FIGURE 7 ***/
.c7 { grid-template-rows: repeat(4, minmax(100px, 1fr) );
grid-template-columns: repeat(auto-fit, minmax(40%, 1fr) )
minmax(50%, 2fr);
width: 57%; }
/*** FIGURE 8 ***/
.c8 { grid-template-rows: 100px 300px 100px;
grid-template-columns: 1fr 3fr;
grid-template-areas:
'logo header'
'sidebar main'
'copyright footer'; }
.c8 .item-1 { grid-area: logo; }
.c8 .item-2 { grid-area: header;
font-size: 1.5em; }
.c8 .item-3 { grid-area: sidebar;
background-color: white;
font-size: 2em;
font-color: red;
font-family: 'Times New Roman', Times, serif; }
.c8 .item-4 { grid-area: main;
background-color: #947a62;
font-size: 1em; }
.c8 .item-5 { grid-area: copyright;
font-size: 1em;
text-align: center;}
.c8 .item-6 { grid-area: footer;
font-size: 1em;
text-align: center;}
.fb-color { background-color: #7a4a1c;
color: white; }
.fb-font { color: white;
font-family: 'Roboto', sans-serif; }
/*** FIGURE 9 ***/
.c9 { grid-template-rows: repeat(4, minmax(100px, 1fr) );
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr) )
minmax(200px, 2fr);
grid-gap: 10px; }
.c9 .item-1 { grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2; }
.c9 .item-2 { grid-row: 1 / 2;
grid-column: 2 / 5; }
.c9 .item-3 { grid-area: 2 / 1 / 4 / 5; }
</style>
</head>
<body>
<p>FIG. 1: Basic grid demonstrating various placement of items</p>
<div class = "container c1">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
</div>
<p>FIG. 2: Placement using spans</p>
<div class = "container c2">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
</div>
<p>FIG. 3: Placement using negative row/col values</p>
<div class = "container c3">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
</div>
<p>FIG. 4: Demonstrating layering items</p>
<div class = "container c4">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
<div class = "item item-4">Item 4</div>
</div>
<p>FIG. 5: Demonstrating Fractional Units (Resize window to see effects) </p>
<div class = "container c5">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
<div class = "item item-4">Item 4</div>
<div class = "item item-5">Item 5</div>
<div class = "item item-6">Item 6</div>
</div>
<p>FIG. 6: Demonstrating how to prevent items from smushing when part of a relatively-sized layout (Resize window to see effects) </p>
<div class = "container c6">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
<div class = "item item-4">Item 4</div>
<div class = "item item-5">Item 5</div>
<div class = "item item-6">Item 6</div>
</div>
<p>FIG. 7: Demonstrating the same as above, but saving us typing AND keeping items within their container </p>
<div class = "container c7">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
<div class = "item item-4">Item 4</div>
<div class = "item item-5">Item 5</div>
<div class = "item item-6">Item 6</div>
</div>
<p>FIG. 8: Demonstrating item placement without using row/col numbers </p>
<div class = "container c8">
<div class = "item-1 fb-color"> <img src="fb.png" style = "height: 100px"> </div>
<div class = "item-2 fb-font fb-color"> <h1> Fartbook </h1> </div>
<div class = "item-3">
<p> ATTENTION: LOCAL SINGLES IN YOUR AREA!!! CLICK
<a href="https://www.someshadysite.com">HERE</a>
</p>
</div>
<div class = "item-4 fb-font">
<h4>Stewart Farts:</h4>
<p>Check out this bad boy!</p>
<h4>Wayne:</h4>
<p>Idk how ye convinced me to join this, but I don't like it.</p>
<h5>Squirrely Dan commented:</h5>
<p style="margin-left: 1em">And that's what I appreciates aboutcha, always trying new things. </p>
</div>
<div class = "item-5 fb-color fb-font"> <p>©2016 The Skids</p> </div>
<div class = "item-6 fb-color fb-font">
<p>Check out our other work:
<a href="https://www.youtube.com/watch?v=dbjzSggm4Y8">HERE!</a>
</p>
</div>
</div>
<p>FIG. 9: Figure 7 but with a grid-gap of 10 pixels</p>
<div class = "container c9">
<div class = "item item-1">Item 1</div>
<div class = "item item-2">Item 2</div>
<div class = "item item-3">Item 3</div>
</div>
</body>
</html>
]]>