I am currently using grids to make a website. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Why Mr.Wilmoose Should not have the great Ace do work</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="gridcontainer">
<div id="head"class="griditem">Ace Is Cool</div>
<div id="nav"class="griditem">F</div>
<div id="main"class="griditem">""</div>
<div id="right"class="griditem">l boso</div>
<div id="left" class="griditem">cheese</div>
<div id="footer" class="griditem">Go die in a hole</div>
</div>
</body>
</html>—————————————————————————————
^For HTML
—————————————————————————————
.gridcontainer{
display: grid;
grid-template-areas:
"h h h h h"
"n n n n r"
"l m m m r"
"l m m m r"
"f f f f f"
;
}
.griditem{
border: 1px black solid;
}
#head{
grid-area: h;
}
#nav{
grid-area: n;
}
#main{
grid-area: m;
}
#left{
grid-area: l;
}
#right{
grid-area: r;
}
#footer{
grid-area: f;
}——————————————————————————————-
^For CSS
Leave a Reply