Skip to content

Instantly share code, notes, and snippets.

@jomoespe

jomoespe/html-grid-basic-template.html

Last active September 19, 2018 10:39
Show Gist options
  • Save jomoespe/a684ab3060d8e245e840c89d964df225 to your computer and use it in GitHub Desktop.
Save jomoespe/a684ab3060d8e245e840c89d964df225 to your computer and use it in GitHub Desktop.
Download ZIP
A basic HTML template structured with grid layout
Raw
html-grid-basic-template.html
<html>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-size: 1.6rem;
display: grid;
height: 100vh;
grid-template-columns: auto 20rem;
grid-template-rows: 10rem 1fr 7rem;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
align-content: stretch;
justify-content: stretch;
/*grid-gap: 10px 10px;*/
}
header {
grid-area: header;
}
section {
grid-area: main;
}
aside {
grid-area: sidebar;
background-color: #f8f8f8;
}
footer {
grid-area: footer;
align-self: stretch;
}
@media (max-width: 600px) {
body {
grid-template-columns: auto;
grid-template-rows: 5rem auto 10rem;
grid-template-areas:
"header"
"main"
"footer";
}
aside {
display: none;
}
}
</style>
<header>Header</header>
<section>Content</section>
<aside>Menu</aside>
<footer>Footer</footer>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment