CSS GRID Responsive Website
Built CSS GRID Responsive website
A Pen by Harman Pannu on CodePen.
Built CSS GRID Responsive website
A Pen by Harman Pannu on CodePen.
<h1>CSS Grid Website</h1> | |
<div class="wrapper"> | |
<div class="header"> | |
Header | |
</div> | |
<div class="sidebox-1"> | |
SideBox 1 | |
</div> | |
<div class="sidebox-2"> | |
SideBox 2 | |
</div> | |
<div class="main"> | |
Main | |
</div> | |
<div class="footer"> | |
Footer | |
</div> | |
</div> |
@import url("https://fonts.googleapis.com/css?family=Roboto"); | |
body, | |
html { | |
font-family: "Roboto", sans-serif; | |
color: #fff; | |
} | |
h1 { | |
text-align: center; | |
color: #333233; | |
margin-bottom: 1.5em; | |
} | |
.wrapper { | |
display: grid; | |
grid-template-columns: 1fr; | |
grid-template-rows: auto; | |
max-width: 960px; | |
margin: 0 auto; | |
background: #cac9ca; | |
text-align: center; | |
.header { | |
width: 100%; | |
height: 200px; | |
background: #ff70e7; | |
} | |
.sidebox-1 { | |
width: 100%; | |
height: 200px; | |
background: #F16D7E; | |
} | |
.sidebox-2 { | |
width: 100%; | |
height: 200px; | |
background: #f0c40f; | |
} | |
.main { | |
width: 100%; | |
height: 400px; | |
background: #333233; | |
} | |
.footer { | |
width: 100%; | |
height: 200px; | |
background: #2b9388; | |
} | |
} | |
@media (min-width: 768px) { | |
.wrapper { | |
grid-template-columns: 1fr 1fr 1fr; | |
grid-template-rows: minmax(200px, auto); | |
.header { | |
grid-column: 1/4; | |
grid-row: 4/5; | |
} | |
.sidebox-1 { | |
grid-column: 3/4; | |
grid-row: 2/3; | |
} | |
.sidebox-2 { | |
grid-column: 3/4; | |
grid-row: 3/4; | |
} | |
.main { | |
grid-column: 1/3; | |
grid-row: 2/4; | |
} | |
.footer { | |
grid-column: 1/4; | |
grid-row: 1/2; | |
} | |
} | |
} |