Click and drag to scroll left and right to view all 13 figures.
<!-- figure 20.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
display: grid;
width: 90%;
height: 480px;
grid-template-columns: [first] 160px [second] 1fr [last];
grid-template-rows: [first] 60px [second] 1fr [third] 60px [last];
}
.A { background-color: pink; }
.B { background-color: lightblue; }
.C { background-color: orange; }
.D { background-color: grey; }
.E { background-color: violet; }
.F { background-color: gold; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
<div class="F">F</div>
</div>
</body>
</html>
<!-- figure 20.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#grid {
width: 90%;
height: 480px;
display: grid;
grid-template-areas: "header header"
"nav main"
"footer footer";
grid-template-rows: 50px 1fr 50px;
grid-template-columns: 150px 1fr;
}
#grid header { grid-area: header; background-color: lightblue; }
#grid nav { grid-area: nav; background-color: orange; }
#grid main { grid-area: main; background-color: grey; }
#grid footer { grid-area: footer; background-color: lightblue; }
</style>
</head>
<body>
<section id="grid">
<header>HEADER</header>
<nav>SIDEBAR</nav>
<main>MAIN AREA</main>
<footer>FOOTER</footer>
</section>
</body>
</html>
<!-- figure 20.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#grid {
display: grid;
grid-template-columns: 100px;
grid-template-rows: 100px;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
}
#A { grid-column: 1; grid-row: 1; background-color: pink; }
#B { grid-column: 2; grid-row: 1; background-color: lightblue; }
#C { grid-column: 1; grid-row: 2; background-color: orange; }
#D { grid-column: 2; grid-row: 2; background-color: grey; }
#E { grid-column: 3; grid-row: 1; background-color: violet; }
#F { grid-column: 3; grid-row: 2; background-color: gold; }
</style>
</head>
<body>
<div id="grid">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
<div id="F">F</div>
</div>
</body>
</html>
<!-- figure 20.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#grid {
display: grid;
grid-template-columns: 100px 100px 100px 100px 100px;
grid-template-rows: 50px 50px 50px;
grid-auto-flow: row;
}
.A { background-color: gold; grid-column: 2; grid-row: span 2; }
.B { background-color: lightblue; grid-column: span 2; }
.C { background-color: violet; }
.D { background-color: yellowgreen; }
.E { background-color: silver; }
</style>
</head>
<body>
<div id="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
</div>
</body>
</html>
<!-- figure 20.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#grid {
width: 90%;
height: 480px;
display: grid;
grid-template-areas: "header header"
"nav main"
"footer footer";
grid-template-rows: 50px 1fr 50px;
grid-template-columns: 150px 1fr;
grid-column-gap: 5px;
grid-row-gap: 5px;
}
#grid header { grid-area: header; background-color: lightblue; }
#grid nav { grid-area: nav; background-color: orange; }
#grid main { grid-area: main; background-color: grey; }
#grid footer { grid-area: footer; background-color: lightblue; }
</style>
</head>
<body>
<section id="grid">
<header>HEADER</header>
<nav>SIDEBAR</nav>
<main>MAIN AREA</main>
<footer>FOOTER</footer>
</section>
</body>
</html>
<!-- figure 20.14 & figure 20.15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
display: grid;
width: 90%;
height: 480px;
grid-template-columns: [first] 100px [second] 100px [third] 100px
[fourth] 100px [last];
grid-template-rows: [first] 100px [second] 100px [last];
}
.A { background-color: violet; }
.B {
background-color: lightblue;
grid-column-start: 2;
grid-column-end: span 2;
grid-row-start: first;
grid-row-end: span last;
}
.C { background-color: orange; }
.D { background-color: orange; }
.E { background-color: violet; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
</div>
</body>
</html>
<!-- figure 20.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
display: grid;
width: 90%;
height: 480px;
grid-template-columns: [first] 100px [second] 100px [third] 100px
[fourth] 100px [last];
grid-template-rows: [first] 100px [second] 100px [last];
}
.A { background-color: violet; }
.B {
background-color: lightblue;
grid-column: 2 / span 2;
grid-row: first / span last;
}
.C { background-color: orange; }
.D { background-color: orange; }
.E { background-color: violet; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
</div>
</body>
</html>
<!-- figure 20.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
display: grid;
width: 90%;
height: 480px;
grid-template-columns: [first] 100px [second] 100px [third] 100px
[fourth] 100px [last];
grid-template-rows: [first] 100px [second] 100px [last];
}
.A { background-color: violet; }
.B {
background-color: lightblue;
grid-area: first / 2 / span last / span 2;
}
.C { background-color: orange; }
.D { background-color: orange; }
.E { background-color: violet; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
</div>
</body>
</html>
<!-- figure 20.22 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
display: grid;
width: 300px;
height: 200px;
border: 1px solid black;
grid-template-columns: [first] 50px [second] 50px [third] 50px
[fourth] 50px [last];
grid-template-rows: [first] 50px [second] 50px [last];
border: 1px solid black;
justify-items: center;
align-items: center;
}
.A { background-color: darkgrey; }
.B { background-color: salmon; }
.C { background-color: orange; }
.D { background-color: yellow; }
.E { background-color: MediumAquamarine; }
.F { background-color: violet; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
<div class="F">E</div>
</div>
</body>
</html>
<!-- figure 20.24 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
display: grid;
width: 300px;
height: 200px;
grid-template-columns: [first] 50px [second] 50px [third] 50px
[fourth] 50px [last];
grid-template-rows: [first] 50px [second] 50px [last];
border: 1px solid black;
}
.A { background-color: darkgrey; }
.B { background-color: salmon; justify-self: center; align-self: center; }
.C { background-color: orange; }
.D { background-color: yellow; }
.E { background-color: MediumAquamarine; }
.F { background-color: violet; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
</div>
</body>
</html>
<!-- figure 20.25 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
font-family: grid;
font-family: 90%;
font-family: 480px;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: 50px;
}
.A { background-color: gold; }
.B { background-color: lightblue; }
.C { background-color: pink; order: -1; }
.D { background-color: darkgrey; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
</div>
</body>
</html>
<!-- figure 20.27 & figure 20.28 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.grid {
font-family: grid;
font-family: 90%;
font-family: 480px;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
}
.A { background-color: gold; }
.B { background-color: lightblue; }
.C { background-color: gold; }
.D { background-color: lightblue; }
.E { background-color: darkgrey; margin: -10px; z-index: 1; }
.F { background-color: lightblue; }
.G { background-color: gold; }
.H { background-color: lightblue; }
.I { background-color: gold; }
</style>
</head>
<body>
<div class="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
<div class="F">F</div>
<div class="G">G</div>
<div class="H">H</div>
<div class="I">I</div>
</div>
</body>
</html>
<!-- figure 20.30 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
form {
display: grid;
grid-template-columns: [labels] auto [controls] auto;
grid-column-gap: 5px;
grid-row-gap: 5px;
}
form > label { grid-column: labels; grid-row: auto; justify-self: end; }
form > input { grid-column: controls; grid-row: auto; }
.buttons {
grid-column: 1 / span 2;
grid-row: auto;
justify-self: end;
}
</style>
</head>
<body>
<form>
<label>Username: </label><input type="text" name="username">
<label>Email: </label><input type="email" name="email">
<label>Password: </label><input type="password" name="password">
<div class="buttons">
<input type="submit" value="Login">
<input type="reset" value="Cancel">
</div>
</form>
</body>
</html>