Skip to content

Instantly share code, notes, and snippets.

@zocom-christoffer-wallenberg

zocom-christoffer-wallenberg/index.html

Last active January 28, 2020 12:53
Show Gist options
  • Save zocom-christoffer-wallenberg/20c2cf1f6357b35100d41182fd227d79 to your computer and use it in GitHub Desktop.
Save zocom-christoffer-wallenberg/20c2cf1f6357b35100d41182fd227d79 to your computer and use it in GitHub Desktop.
Download ZIP
A grid with grid-areas auto
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">
<h1>Hello</h1>
<p>Hej</p>
<p>Hej</p>
<p>Hej</p>
<p>Hej</p>
<p>Hej</p>
<p>Hej</p>
</main>
<aside class="aside"></aside>
</div>
</body>
</html>
Raw
playground.json
{
"scripts": [],
"styles": []
}
Raw
style.css
.grid-container {
max-width: 1000px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 100px auto;
grid-template-areas: "header header header header header header"
"main main main main aside aside";
}
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment