Signup/Sign In
Ask Question
Not satisfied by the Answer? Still looking for a better solution?

CSS LEVEL 16 > LESSON 8

Below is my code but still cannot get it right in.kindly help

.grid {
display: grid;
background-color: #d6d1f5;
padding: 20px;
height: 200px;
grid-template: "navbar navbar navbar" 40px
"side main main" 40px
"footer footer footer" auto
/ auto 25% auto;
by

2 Answers

sam5epi0l
Hi there, Try this code:

<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Template</title>
<style>
.grid {
display: grid;
background-color: #d6d1f5;
padding: 20px;
height: 200px;
grid-template: 40px 40px auto / auto 25% auto;
}
.item {
background-color: #E7E4F8;
border: 1px solid black;
padding: 20px;
text-align: center;
}

</style>
</head>
<body>
<div class=\"grid\">
<div class=\"item\">1</div>
<div class=\"item\">2</div>
<div class=\"item\">3</div>
<div class=\"item\">4</div>
<div class=\"item\">5</div>
<div class=\"item\">6</div>
<div class=\"item\">7</div>
<div class=\"item\">8</div>
<div class=\"item\">9</div>
</div>
</body>
</html>
sylviayvonne
Thank you.It worked

Login / Signup to Answer the Question.