Skip to content

Instantly share code, notes, and snippets.

@zocom-christoffer-wallenberg

zocom-christoffer-wallenberg/index.html

Last active January 28, 2020 12:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save zocom-christoffer-wallenberg/318b0c1330e0502a3345b98d6c63c281 to your computer and use it in GitHub Desktop.
Save zocom-christoffer-wallenberg/318b0c1330e0502a3345b98d6c63c281 to your computer and use it in GitHub Desktop.
Download ZIP
a simple grid
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>
<main class="grid-container">
<header class="box1">
<nav class="menu">
<a href="#">Hem</a>
<a href="#">Om mig</a>
<a href="#">Kontakt</a>
</nav>
</header>
<section class="box2"></section>
<section class="box3"></section>
</main>
</body>
</html>
Raw
playground.json
{
"scripts": [],
"styles": []
}
Raw
style.css
.grid-container {
display: grid;
max-width: 1000px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 120px);
}
.box1 {
border: 1px solid #000000;
grid-column: auto / span 6;
grid-row: auto / span 1;
}
.box2 {
border: 1px solid #000000;
grid-column: auto / span 2;
grid-row: auto / span 3;
}
.box3 {
border: 1px solid #000000;
grid-column: auto / span 4;
grid-row: auto / span 3;
}
.menu {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu a {
margin-left: 1rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment