SarahElson/index.html

## 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" />
    <link rel="stylesheet" href="./style.css" />
    <title>Creating and Structuring the grid layout</title>
  </head>
  <body>
    <div class="container">
      <div class="header">Header</div>
      <div class="menu">Menu</div>
      <div class="content">Content</div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

## style.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container > div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: #ffeead;
}

html,
body {
  background: #ffeead;
  padding: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 28px;
}

/* =============================== */

/* MAIN CSS GRID CODE */
.container {
  height: 100%;
  display: grid;
  grid-template-columns: 200px 200px;
  grid-gap: 13px;
}

/* =============================== */

.container > div:nth-child(1n) {
  background: #ce96ca;
}

.container > div:nth-child(3n) {
  background: #88d8b0;
}

.container > div:nth-child(2n) {
  background: #ff6f69;
}

.container > div:nth-child(4n) {
  background: #ffcc5c;
}

.grid-item:is(:nth-child(3), :nth-child(5), :nth-child(8), :nth-child(12), :nth-child(17)) {
  grid-column: span 3;
  grid-row: span 2;
}
	<!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" />
	<link rel="stylesheet" href="./style.css" />
	<title>Creating and Structuring the grid layout</title>
	</head>
	<body>
	<div class="container">
	<div class="header">Header</div>
	<div class="menu">Menu</div>
	<div class="content">Content</div>
	<div class="footer">Footer</div>
	</div>
	</body>
	</html>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	.container > div {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5rem;
	color: #ffeead;
	}

	html,
	body {
	background: #ffeead;
	padding: 10px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 28px;
	}

	/* =============================== */

	/* MAIN CSS GRID CODE */
	.container {
	height: 100%;
	display: grid;
	grid-template-columns: 200px 200px;
	grid-gap: 13px;
	}

	/* =============================== */

	.container > div:nth-child(1n) {
	background: #ce96ca;
	}

	.container > div:nth-child(3n) {
	background: #88d8b0;
	}

	.container > div:nth-child(2n) {
	background: #ff6f69;
	}

	.container > div:nth-child(4n) {
	background: #ffcc5c;
	}

	.grid-item:is(:nth-child(3), :nth-child(5), :nth-child(8), :nth-child(12), :nth-child(17)) {
	grid-column: span 3;
	grid-row: span 2;
	}