davidvandenbor/Grid-challenge-exercise-solution-with-grid-areas.md

## Grid-challenge-exercise-solution-with-grid-areas.md

      
    Raw
  

              Grid-challenge-exercise-solution-with-grid-areas.md
            
          
    Grid challenge exercise (solution with grid areas)

One of three lesson files with CSS grid exercises. This file contains the grid areas solution to the layout challenge. There's a second one with the solution using grid lines, see here.
Preview: at bl.ocks.org

  
## index.html
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="style.css">
</head>

<body>
   <main>
      <section class="orange"></section>
      <section class="blue"></section>
      <section class="red"></section>
      <section class="green"></section>
   </main>
</body>

</html>

## style.css
section {
   padding: 30%
}

main {
   color: white;
   font-size: 1vw;
   display: grid;
	grid-gap: 10px;
	max-width: 1200px;
	margin: 10px auto;

	/* omit the following five lines for the challenge */
   grid-template-areas:
      "one two three"
      "one two four";
   grid-template-rows: 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr;

}

.orange {
	background: orange;
	/* omit the following line for the challenge */
   grid-area: one
}

.blue {
	background: blue;
	transition: all 2s ease;
	/* omit the following line for the challenge */
   grid-area: two;

}

.red {
	background: red;
	/* omit the following line for the challenge */
   grid-area: three;
}

.green {
	background: green;
	/* omit the following line for the challenge */
   grid-area: four;
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<main>
	<section class="orange"></section>
	<section class="blue"></section>
	<section class="red"></section>
	<section class="green"></section>
	</main>
	</body>

	</html>
	section {
	padding: 30%
	}

	main {
	color: white;
	font-size: 1vw;
	display: grid;
	grid-gap: 10px;
	max-width: 1200px;
	margin: 10px auto;

	/* omit the following five lines for the challenge */
	grid-template-areas:
	"one two three"
	"one two four";
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;

	}

	.orange {
	background: orange;
	/* omit the following line for the challenge */
	grid-area: one
	}

	.blue {
	background: blue;
	transition: all 2s ease;
	/* omit the following line for the challenge */
	grid-area: two;

	}

	.red {
	background: red;
	/* omit the following line for the challenge */
	grid-area: three;
	}

	.green {
	background: green;
	/* omit the following line for the challenge */
	grid-area: four;
	}