<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Testing CSS Grids</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main-top">Main Top</div>
<div class="main-bottom">Main Bottom</div>
<div class="footer">footer</div>
</div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/magnus16/testing-css-grids-MvQpax */
.container{
display:grid;
grid-gap:10px;
grid-template-rows:1fr 1fr 1fr 1fr;
grid-template-columns:1fr 1fr;
grid-template-areas:
"header header"
"sidebar sidebar "
"maintop mainbottom"
"footer footer";
text-align:center;
}
.container * {
padding:10px;
}
.header{
background:yellow;
grid-area:header;
height:50px;
}
.sidebar{
background:green;
grid-area:sidebar;
}
.main-top{
background:blue;
grid-area:maintop;
}
.main-bottom{
background:cyan;
grid-area:mainbottom;
}
.footer{
background:red;
grid-area:footer;
}
@media screen and (min-width: 480px){
.container{
grid-template-rows:1fr 1fr 1fr 1fr 1fr;
grid-template-columns:1fr 1fr 1fr;
grid-template-areas:
"header header header"
"sidebar maintop maintop"
"sidebar mainbottom mainbottom"
"sidebar mainbottom mainbottom"
"footer footer footer";
}
}