ch3-boxy.html

<!DOCTYPE html>
<html>
  <head>
    <title>Boxy Layout example</title>
    <meta charset="utf-8">
    <style>
    	h1 {
    		font-family: Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif; font-size: 32px; font-style: normal; font-variant: normal; font-weight: 500;
    		text-align: center;
    	}
    	img { object-fit: cover;  border-radius: 10px ; display: block; max-width: 100%; max-height: 100%; margin-bottom: 20px; }

    	@media only screen and (min-width: 720px) {
	    	.wrapper {
	    		display: grid;
	    		grid-template-columns: repeat(13, [gutter] 10px [col] 1fr) ;
	    		grid-template-rows: [row] auto repeat(13, [gutter] 10px [row] 60px);
	    	}

	    	header { 
	    		grid-column: col / span gutter 12; 
	    		grid-row: 1 / 1;
	    	}

	    	img {
	    		margin: 0;
	    	}

	    	.box1 {
    			grid-column: col 1 / span gutter 6; 
    			grid-row: row 2 / span gutter 2;
	    	}

	    	.box2 {
	    		grid-column: col 7 / span gutter 6; 
	    		grid-row: row 2 / span gutter 2;
	    	}

	    	.box3 {
	    		grid-column: col 1 / span gutter 6; 
	    		grid-row: row 4 / span gutter 2;
	    	}

	    	.box4 {
	    		grid-column: col 7 / span gutter 6; 
	    		grid-row: row 4 / span gutter 2;
	    	}

	    	.box5 {
	    		grid-column: col 1 / span gutter 6; 
	    		grid-row: row 6 / span gutter 4;
	    	}

	    	.box6 {
	    		grid-column: col 7 / span gutter 6; 
	    		grid-row: row 6 / span gutter 2;
	    	}

	    	.box7 {
	    		grid-column: col 1 / span gutter 6; 
	    		grid-row: row 10 / span gutter 2;
	    	}

	    	.box8 {
	    		grid-column: col 7 / span gutter 6; 
	    		grid-row: row 8 / span gutter 4;
	    	}

	    }

	    @media only screen and (min-width: 1200px) {
	    	.box1 {
	    		grid-column: col 1 / span gutter 4; 
	    		grid-row: row 2 / span gutter 2;
	    	}

	    	.box2 {
	    		grid-column: col 1 / span gutter 9; 
	    		grid-row: row 7 / span gutter 4;
	    	}

	    	.box3 {
	    		grid-column: col 1 / span gutter 12; 
	    		grid-row: row 11 / span gutter 3;
	    	}

	    	.box4 {
	    		grid-column: col 10 / span gutter 3; 
	    		grid-row: row 2 / span gutter 3;
	    	}

	    	.box5 {
	    		grid-column: col 5 / span gutter 5; 
	    		grid-row: row 2 / span gutter 5;
	    	}

	    	.box6 {
	    		grid-column: col 1 / span gutter 4; 
	    		grid-row: row 4 / span gutter 3;
	    	}

	    	.box7 {
	    		grid-column: col 10 / span gutter 3; 
	    		grid-row: row 5 / span gutter 4;
	    	}

	    	.box8 {
	    		grid-column: col 10 / span gutter 3; 
	    		grid-row: row 9 / span gutter 2;
	    	}
	    }
    </style>
  </head>

  <body>

  	<div class="wrapper">
  		<header>
  			<h1>Little boxes layout</h1>
  		</header>

  		
  		<img src="images/balloon1.jpg" alt="Bristol Balloon Fiesta" class="box1">
  		<img src="images/balloon2.jpg" alt="Bristol Balloon Fiesta" class="box2">
  		<img src="images/balloon3.jpg" alt="Bristol Balloon Fiesta" class="box3">
  		<img src="images/balloon4.jpg" alt="Bristol Balloon Fiesta" class="box4">
  		<img src="images/balloon5.jpg" alt="Bristol Balloon Fiesta" class="box5">
  		<img src="images/balloon6.jpg" alt="Bristol Balloon Fiesta" class="box6">
  		<img src="images/balloon7.jpg" alt="Bristol Balloon Fiesta" class="box7">
  		<img src="images/balloon8.jpg" alt="Bristol Balloon Fiesta" class="box8">


  	</div>

  </body>

</html>