Testing CSS Grids

In this example below you will see how to do a Testing CSS Grids with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by magnus16, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright magnus16 ©
  • HTML
  • CSS
<!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";
  } 
  
}

Comments