Skip to content

Instantly share code, notes, and snippets.

@corsonr

corsonr/index.html

Created January 3, 2018 12:36
Show Gist options
  • Save corsonr/7db86dd896d9670adf66fc8b0f7f1098 to your computer and use it in GitHub Desktop.
Save corsonr/7db86dd896d9670adf66fc8b0f7f1098 to your computer and use it in GitHub Desktop.
Download ZIP
Basic grid layout
Raw
index.html
<html>
<header>
<link rel='stylesheet' id='style-css' href='style.css' type='text/css' media='all' />
</header>
<body>
<section id="page">
<header>Header</header>
<section id="intro">Intro</section>
<main>Main section</main>
<footer>Footer</footer>
</section>
</body>
</html>
Raw
style.css
body {
margin: 0;
}
#page {
display: grid;
width: 100%;
height: 200px;
grid-template: [header-left] "head head" 100px [header-right]
[intro-left] "intro intro" 490px [intro-right]
[main-left] "main main" 1fr [main-right]
[footer-left] "foot foot" 30px [footer-right]
/ 120px 1fr;
}
header {
width: 1020px;
justify-self: center;
background-color: lime;
grid-area: head;
}
#intro {
width: 100%;
background-color: blue;
grid-column: intro;
}
main {
width: 1020px;
justify-self: center;
background-color: yellow;
grid-area: main;
}
footer {
width: 1020px;
justify-self: center;
background-color: red;
grid-column: foot;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment