
	#grid5
	{
		max-width: 1000px;
		height: 600px;
		border: 1px solid blue;
		background-color: #e8e8e8;
		margin: 0 auto;
		margin-bottom: 100px;
		display: grid;
		grid-template: repeat(2, 1fr 1fr) / repeat(2, 1fr 1fr 1fr);
		
	}
	
	.box5
	{
		border: 1px solid red;
		background-color: #e8e8e8;
	}
	
	.B5
	{
		grid-row-start: 1;
		grid-row-end: 4;
	}
	
	.D5
	{
		grid-row: 2 / 4;
		grid-column: 3 / span 2;
	}
	
	.F5
	{
		grid-area: 1 / 5 / span 3 / span 2;
		/*
		1- grid-row-start
		2- grid-column-start
		3- grid-row-end
		4- grid-column-end */
	}
	
	
	
	#grid4
	{
		max-width: 1000px;
		height: 600px;
		border: 1px solid blue;
		background-color: #e8e8e8;
		margin: 0 auto;
		margin-bottom: 100px;
		display: grid;
		grid-template: repeat(2, 3fr 1fr) /  repeat(2, minmax(100px, 150px) minmax(100px, 150px) minmax(100px, 200px));
		grid-gap: 10px; /* zabrało miejsce z najszerszego boxu - z 200px zrobily sie 175px) */
	}
	
	.box4
	{
		border: 1px solid red;
		background-color: #e8e8e8;
	}



	#grid3
	{
		max-width: 1000px;
		height: 600px;
		border: 1px solid blue;
		background-color: #e8e8e8;
		margin: 0 auto;
		margin-bottom: 100px;
		display: grid;
	/*	grid-template-rows: repeat(2, 200px 50px); 
		grid-template-columns: repeat(2, 2fr 1fr 50px); */
		grid-template: repeat(2, 200px 50px) /  repeat(2, 2fr 1fr 50px);
	}
	
	.box3
	{
		border: 1px solid red;
		background-color: #e8e8e8;
	}





	#grid2
	{
		width: 1000px;
		height: 600px;
		border: 1px solid blue;
		background-color: #e8e8e8;
		margin: 0 auto;
		margin-top: 100px;
		display: grid;
		grid-template: 1fr 2fr 3fr / 2fr 1fr;
	}
	
	.box2
	{
		border: 1px solid red;
		background-color: #e8e8e8;
	}
	
	
	
	
	#grid
	{
		width: 1000px;
		height: 600px;
		border: 1px solid blue;
		background-color: #e8e8e8;
		margin: 0 auto;
		margin-top: 100px;
		display: grid;
	/*	grid-template-columns: 200px 50%;
		grid-template-rows: 100px 20% 150px;  */
		grid-template: 100px 20% 200px / 200px 50%;  /* rows / columns */

	}
	
	.box
	{
		border: 1px solid red;
		background-color: #e8e8e8;
	}

	p 
	{
		text-align: center;
		margin-bottom: 50px;
	}