After running my HTML and CSS through the validation services, everything seemed to check out fine. However, when I try to implement the grid layout using the CSS below, it doesn't seem to work as expected:
body {
display: grid;
grid-template-columns: 6fr;
grid-template-rows: 6fr;
background-color: #f4fff4;
height: 500px;
}
.Background {
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: 6;
}
#Heads {
grid-row-start: 2;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 5;
box-sizing: border-box;
}
.Backdrop {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 6;
}
.Arrow {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 6;
grid-column-end: 6;
box-sizing: border-box;
}
.Regis {
grid-row-start: 5;
grid-row-end: 5;
grid-column-start: 2;
grid-column-end: 3;
box-sizing: border-box;
}
.Cont {
grid-row-start: 5;
grid-row-end: 5;
grid-column-start: 4;
grid-column-end: 5;
box-sizing: border-box;
}
.Refer {
grid-row-start: 4;
grid-row-end: 4;
grid-column-start: 3;
grid-column-end: 4;
box-sizing: border-box;
}
Here is a snippet of the HTML code that is supposed to be styled with the above CSS rules:
<!doctype html>
<html>
<head>
<title>Website Domain Name</title>
<meta charset="UTF-8">
<meta name="description" content="All in due time.">
<meta name="keywords" content="Git, Code, Win, Yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Hit1.css" rel="stylesheet">
</head>
<body>
<div class="Background">
<header id="Heads">
<h1>Click <a href="http://www.w3schools.com">Here!</a></h1>
<select>
<option>Beans</option>
<option>Cans</option>
<option>Frijole</option>
<option>Jaguar</option>
</select>
</header>
<div class="Backdrop">
<div class="Arrow">
<p><a href="http://www.w3schools.com"><img src="Arrows.jpg" alt="Arrow"></a></p>
</div>
<div class="Regis">
<p><a href="http://www.w3schools.com">Registration</a></p>
</div>
<div class="Cont">
<p><a href="http://www.w3schools.com">Contact Us</a></p>
</div>
<div class="Refer">
<p><a href="http://www.w3schools.com">References</a></p>
</div>
</div>
</div>
</body>
</html>
If anyone has thoughts or ideas on how to fix the issue, please let me know. Any help is greatly appreciated! Thank you so much! =]