Skip to content

Instantly share code, notes, and snippets.

@mhkasif

mhkasif/index.html

Created February 27, 2020 09:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mhkasif/fa2110710c8ebddf8ef4e0899e610d50 to your computer and use it in GitHub Desktop.
Save mhkasif/fa2110710c8ebddf8ef4e0899e610d50 to your computer and use it in GitHub Desktop.
Download ZIP
XWbRrQg
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="root">
<div class="container">
<div class="header item">header</div>
<div class="small-box1 item">smallBox1</div>
<div class="small-box2 item">smallBox2</div>
<div class="small-box3 item">smallBox3</div>
<div class="main-content item">main-content</div>
<div class="side-bar item">side-bar</div>
<div class="footer item">footer</div>
</div>
</div>
</body>
</html>
Raw
style.css
*{
overflow:hidden;
margin:0px
}
.item{
background:red;
}
.root{
display:flex;
align-items:center;
justify-content:center;
}
.container{
width:50vw;
height:90vh;
display:grid;
grid-template-rows:1fr 2fr 4fr 1fr;
grid-template-columns:3fr 3fr 3fr 2fr;
grid-gap:10px;
}
.small-box1{
grid-column:1/2
}
.small-box2{
grid-column:2/3
}
.small-box3{
grid-column:3/4
}
.header{
grid-column:1/-1;
grid-row:1/2
}
.footer{
grid-column:1/-1
}
.main-content{
grid-area:3/1/4/4
}
.side-bar{
grid-area:2/4/4/-1
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment