Skip to content

Instantly share code, notes, and snippets.

@naoki-sawada
Created February 11, 2021 04:11
Show Gist options
  • Save naoki-sawada/8e980a3723d7ab2c1b6c6bbf9caaab40 to your computer and use it in GitHub Desktop.
Save naoki-sawada/8e980a3723d7ab2c1b6c6bbf9caaab40 to your computer and use it in GitHub Desktop.
Grid layout example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width, shrink-to-fit=no" />
<style>
body {
display: grid;
grid-template-columns: [menu] 25% [content] auto [end];
grid-template-rows: [header] 10rem [main] auto [footer] 10rem [end];
}
header {
/* grid-column: 2 / 3; */
grid-area: header / content / main / end;
background-color: blue;
color: white;
}
aside {
grid-column: 1 / 2;
grid-row: 1 / 4;
background-color: orange;
}
main {
background-color: red;
color: white;
}
footer {
background-color: yellow;
}
</style>
<title>Grid</title>
</head>
<body>
<header>header</header>
<aside>
<ul>
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
<li><a href="#">d</a></li>
<li><a href="#">e</a></li>
</ul>
</aside>
<main>main</main>
<footer>footer</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment