Skip to content

Instantly share code, notes, and snippets.

@zocom-christoffer-wallenberg

zocom-christoffer-wallenberg/A responsive grid

Last active February 4, 2020 10:12
Show Gist options
  • Save zocom-christoffer-wallenberg/e99de153729710c6bdd3ae7ff9e700c0 to your computer and use it in GitHub Desktop.
Save zocom-christoffer-wallenberg/e99de153729710c6bdd3ae7ff9e700c0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Grid - Media queries</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<h2 class="heading">Header</h2>
<nav>
<ul class="menu__items">
<li class="menu__item"><a class="menu__link" href="#">Hem</a></li>
<li class="menu__item"><a class="menu__link" href="#">Om</a></li>
<li class="menu__item"><a class="menu__link" href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<aside class="aside-left">
<h2 class="heading">Left sidebar</h2>
</aside>
<main class="main-content">
<h2 class="heading">Main content</h2>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus urna, imperdiet id nunc id, bibendum rutrum mauris.
Curabitur efficitur nisi pellentesque nulla porttitor faucibus. Sed elementum, purus non tincidunt ornare, odio augue porta magna, eu eleifend leo nulla sed diam.
Pellentesque ut ligula sit amet nibh egestas scelerisque. Fusce consequat arcu non lectus imperdiet efficitur consequat sed massa.
Vestibulum ante massa, interdum non lacus at, aliquam bibendum nulla. Cras dictum blandit ex ac accumsan.
Donec hendrerit mi eget diam efficitur, sed mattis nisl dignissim. Nullam posuere nibh ante, ac mollis sem volutpat in.
Quisque ut rhoncus arcu. Sed mollis ipsum ut fringilla ornare. Suspendisse metus velit, volutpat et nisl at, rutrum ullamcorper magna.
Mauris elementum ut diam nec convallis. Suspendisse ac mattis justo, id pharetra erat. Aliquam quam urna, tempus eget rhoncus quis, dictum at dui. Morbi pulvinar velit in lacinia efficitur.</p>
</main>
<aside class="aside-right">
<h2 class="heading">Right sidebar</h2>
</aside>
<footer class="footer">
<h2 class="heading">Footer</h2>
<div class="boxes">
<section class="box"></section>
<section class="box"></section>
<section class="box"></section>
<section class="box"></section>
</div>
</footer>
</div>
</body>
</html>
Raw
style.css
body {
margin: 0;
padding: 0;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
grid-template-areas: "header header header header"
"aside-left main-content main-content aside-right"
"aside-left main-content main-content aside-right"
"footer footer footer footer";
}
.header {
grid-area: header;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
nav {
width: 100%;
}
.menu__items {
display: flex;
justify-content: space-around;
list-style-type: none;
padding: 0;
}
.aside-left {
grid-area: aside-left;
display: flex;
justify-content: center;
align-items: center;
}
.main-content {
grid-area: main-content;
}
.aside-right {
grid-area: aside-right;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
grid-area: footer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.boxes {
display: flex;
justify-content: space-around;
width: 100%;
flex-wrap: wrap;
}
.box {
border: 1px solid #000000;
width: 10rem;
height: 10rem;
}
@media only screen and (max-width: 700px) {
.wrapper {
grid-template-columns: 100%;
grid-template-areas: "header"
"aside-left"
"main-content"
"aside-right"
"footer";
}
.main-content {
margin: 1rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment