<![CDATA[<!DOCTYPE HTML>
<html>
<head>
<title>grid-item-positioning.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: repeat(4, 100px);
grid-template-columns: repeat(4, 1fr);
justify-items: start;
align-items: start; }
/*** FIGURE 2 ***/
.c2 { grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(4, 1fr);
justify-items: end;
align-items: end; }
/*** FIGURE 3 ***/
.c3 { grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(4, 1fr);
justify-items: center;
align-items: center; }
/*** FIGURE 4 ***/
.c4 { grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(4, 1fr);
justify-items: baseline;
align-items: baseline; }
.c4 .item-1 { font-size: 0.5em; }
.c4 .item-2 { font-size: 1em; }
.c4 .item-3 { font-size: 1.5em; }
.c4 .item-4 { font-size: 2em; }
/*** FIGURE 5 ***/
.c5 { grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(4, 1fr);
justify-items: stretch;
align-items: stretch; }
/*** FIGURE 6 ***/
.c6 { grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(4, 1fr);
justify-items: center;
align-items: end; }
/*** FIGURE 7 ***/
.c7 { grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(4, 1fr);
justify-items: start;
align-items: start; }
.c7 .item-3 { justify-self: stretch;
align-self: end; }
/*** FIGURE 8 ***/
.c8 { grid-template-rows: repeat(2, 100px);
grid-template-columns: repeat(2, 100px);
justify-content: start;
align-content: start; }
/*** FIGURE 9 ***/
.c9 { grid-template-rows: repeat(2, 100px);
grid-template-columns: repeat(2, 100px);
justify-content: end;
align-content: end; }
/*** FIGURE 10 ***/
.c10 { grid-template-rows: repeat(2, 100px);
grid-template-columns: repeat(2, 100px);
justify-content: center;
align-content: center; }
/*** FIGURE 11 ***/
.c11 { grid-template-rows: repeat(2, 100px);
grid-template-columns: repeat(2, 100px);
justify-content: space-between;
align-content: space-between; }
/*** FIGURE 12 ***/
.c12 { grid-template-rows: repeat(2, 100px);
grid-template-columns: repeat(2, 100px);
justify-content: space-around;
align-content: space-around; }
/*** FIGURE 13 ***/
.c13 { grid-template-rows: repeat(2, 100px);
grid-template-columns: repeat(2, 100px);
justify-content: space-evenly;
align-content: space-evenly; }
</style>
</head>
<body>
<p>FIG. 1: justify-items: start and align-items: start</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 class = "item item-4">Item 4</div>
</div>
<p>FIG. 2: justify-items: end and align-items: end</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 class = "item item-4">Item 4</div>
</div>
<p>FIG. 3: justify-items: center and align-items: center</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 class = "item item-4">Item 4</div>
</div>
<p>FIG. 4: justify-items: baseline and align-items: baseline</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: justify-items: stretch and align-items: stretch</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>
<p>FIG. 6: justify-items: center and align-items: end</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>
<p>FIG. 7: Using justify-self and align-self to adjust a single element</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>
<p>FIG. 8: Using justify-content: start and align-content: start to align the grid</p>
<div class = "container c8">
<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. 9: Using justify-content: end and align-content: end to align the grid</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 class = "item item-4">Item 4</div>
</div>
<p>FIG. 10: Using justify-content: center and align-content: center to align the grid</p>
<div class = "container c10">
<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. 11: Using justify-content: space-between and align-content: space-between to align the grid</p>
<div class = "container c11">
<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. 12: Using justify-content: space-around and align-content: space-around to align the grid</p>
<div class = "container c12">
<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. 13: Using justify-content: space-evenly and align-content: space-evenly to align the grid</p>
<div class = "container c13">
<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>
</body>
</html>
]]>