zocom-christoffer-wallenberg/A responsive grid

## A responsive grid
‎‎

## 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>

## style.css
body {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: auto;
  grid-template-areas: "header"
                       "aside-left"
                       "main-content"
                       "aside-right"
                       "footer";
}

.header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

nav {
  width: 100%;
}

.menu__items {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

.aside-left {
  grid-area: aside-left;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-content {
  grid-area: main-content;
  margin: 0 2rem;
}

.aside-right {
  grid-area: aside-right;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer {
  grid-area: footer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.boxes {
  display: flex;
  justify-content: space-around;
  width: 100%;
  flex-wrap: wrap;
}

.box {
  border: 1px solid #000000;
  background: #93f;
  width: 10rem;
  height: 10rem;
  margin: 1rem;
}

@media only screen and (min-width: 700px) {
  .wrapper {
    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"
                         "footer footer footer footer";
  }
}
	<!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>
	body {
	margin: 0;
	padding: 0;
	}

	.wrapper {
	display: grid;
	grid-template-columns: 100%;
	grid-auto-rows: auto;
	grid-template-areas: "header"
	"aside-left"
	"main-content"
	"aside-right"
	"footer";
	}

	.header {
	grid-area: header;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}

	nav {
	width: 100%;
	}

	.menu__items {
	list-style-type: none;
	padding: 0;
	display: flex;
	justify-content: space-around;
	}

	.aside-left {
	grid-area: aside-left;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	.main-content {
	grid-area: main-content;
	margin: 0 2rem;
	}

	.aside-right {
	grid-area: aside-right;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.footer {
	grid-area: footer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}

	.boxes {
	display: flex;
	justify-content: space-around;
	width: 100%;
	flex-wrap: wrap;
	}

	.box {
	border: 1px solid #000000;
	background: #93f;
	width: 10rem;
	height: 10rem;
	margin: 1rem;
	}

	@media only screen and (min-width: 700px) {
	.wrapper {
	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"
	"footer footer footer footer";
	}
	}