Skip to content

Instantly share code, notes, and snippets.

@zocom-christoffer-wallenberg

zocom-christoffer-wallenberg/index.html

Last active January 28, 2020 12:45
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 zocom-christoffer-wallenberg/1695e04517b4c78209e2acf8387cf0d1 to your computer and use it in GitHub Desktop.
Save zocom-christoffer-wallenberg/1695e04517b4c78209e2acf8387cf0d1 to your computer and use it in GitHub Desktop.
Download ZIP
A grid with grid-areas
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Chat</title>
</head>
<body>
<div class="grid-container">
<header class="header"></header>
<main class="main"></main>
<aside class="aside"></aside>
<footer class="footer"></footer>
</div>
</body>
</html>
Raw
style.css
.grid-container {
max-width: 1000px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 120px;
grid-template-areas: "header header header header header header"
"aside aside main main main main"
"aside aside main main main main"
"footer footer footer footer footer footer"
}
.header {
grid-area: header;
border: 1px solid #000000;
}
.main {
grid-area: main;
border: 1px solid #000000;
}
.aside {
grid-area: aside;
border: 1px solid #000000;
background: #93f;
}
.footer {
grid-area: footer;
border: 1px solid #000000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment