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

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

      
    Raw
  

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

One of three lesson files with CSS grid exercises. This file contains the grid lines solution to the layout challenge. There's a second one with the solution using grid areas 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%;
	transition: all 2s ease;
}

main {
	color: white;
	font-size: 1vw;
	display: grid;
	grid-gap: 10px;

/* omit the following two lines for the challenge */
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;

	max-width: 1200px;
	margin: 10px auto;
}

.orange {
	background: orange;
	/* omit the following two lines for the challenge */
	grid-row: 1/3;
	grid-column: 1/2;
}

.blue {
	background: blue;
	/* omit the following two lines for the challenge */
	grid-row: 1/3;
	grid-column: 2/3;
}

.red {
	background: red;
	/* omit the following two lines for the challenge */
	grid-row: 1/2;
	grid-column: 3/4;
}

.green {
	background: green;
	/* delete the following two lines for the challenge */
	grid-row: 2/3;
	grid-column: 3/4;
}
	<!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%;
	transition: all 2s ease;
	}

	main {
	color: white;
	font-size: 1vw;
	display: grid;
	grid-gap: 10px;

	/* omit the following two lines for the challenge */
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;

	max-width: 1200px;
	margin: 10px auto;
	}

	.orange {
	background: orange;
	/* omit the following two lines for the challenge */
	grid-row: 1/3;
	grid-column: 1/2;
	}

	.blue {
	background: blue;
	/* omit the following two lines for the challenge */
	grid-row: 1/3;
	grid-column: 2/3;
	}

	.red {
	background: red;
	/* omit the following two lines for the challenge */
	grid-row: 1/2;
	grid-column: 3/4;
	}

	.green {
	background: green;
	/* delete the following two lines for the challenge */
	grid-row: 2/3;
	grid-column: 3/4;
	}