/* Based on "Composition II in Red, Blue, and Yellow," by Piet Mondrian (1930): https://en.wikipedia.org/wiki/Piet_Mondrian */
.wrapper {
	width: 600px;
	height: 600px;
	display: grid;
	grid-template-rows: 170px 210px 61px 61px;
	grid-template-columns: 124px 376px 42px;
	grid-gap: 30px 20px; 
	background-color: black;
}

div {
	border: 1px solid black;
	background-color: white;
  font-size: 2rem;
  font-family: Arial, sans-serif;
}
/* Grid will always try to lay out information from the upper left to the lower right (at least in left-to-right systems), with each grid item occupying one row and one column.

If you want to override that distribution, you must provide directions. 

In this example, we have called out the location of each element. Once you understand how this works, consider which of these declarations may not be needed. How could you minimize the code?

Is it helpful to spell out each grid item location for documentation purposes?

*/


.a {
	grid-row: 1/2;
	grid-column: 1/2;

}
.b {
	grid-row: 2/3;
	grid-column: 1/2;
}
.c {
	grid-row: 1/3;
	grid-column: 2/4;
	background-color: #DE271D;
}
.d {
	grid-row: 3/5;
	grid-column: 1/2;
	background-color: #015CA0;
	color: white;
}
.e {
	grid-row: 3/5;
	grid-column: 2/3;
}
.f {
	grid-row: 3/4;
	grid-column: 3/4;
}
.g {
	grid-row: 4/5;
	grid-column: 3/4;
	background-color: #ECDB6B;
}

/* Note: you can give your lines names if you want, instead of using numbers. See https://gridbyexample.com/examples/example7/

Numbers start with 1 and count upwards. Remember to count the lines on the outside of the grid in addition to the lines internally to the layout. */