Css Grid Lunch & Learn

css_grid.css

body {
	margin: 10;
}

.newf {
	border: 10px gray solid;
	height: 400px;
	width: 400px;
	background-size: 400px;
}


/* ONE */
/**********************************************************/
/* Basic Grid */
/**********************************************************/
.container {
	display: grid;

	width: 100%;
}

.baby-booms {
	background-image: url('https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/e35/21373658_712268888965868_8000410507687231488_n.jpg');
}
/* END ONE */

/* .booms { */
/* 	background-image: url('https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/e35/21373365_1888599844725351_7043280335718580224_n.jpg'); */
/* } */

/* .molly { */
/* 	background-image: url('https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/e35/16585626_183380088816541_6372928235365203968_n.jpg'); */
/* 	height: 300px; */
/* } */

/* .duke { */
/* 	background-image: url('https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/e35/21149689_1586615928050007_6538612671892160512_n.jpg'); */
/* } */


/* TWO */
/**********************************************************/
/* Flow-Like */
/**********************************************************/
/* .container { */
/* 	grid-auto-flow: column; */
/* } */
/* END TWO */


/* THREE */
/**********************************************************/
/* Placing them in a Grid */
/**********************************************************/
/* .booms { */
/* 	grid-column: 1 / 2; */
/* 	grid-row: 1 / 2; */
/* } */

/* .molly { */
/* 	grid-column: 2 / 3; */
/* 	grid-row: 2 / 3; */
/* } */

/* .duke { */
/* 	grid-column: 1 / 2; */
/* 	grid-row: 3 / 4; */
/* } */
/* END THREE */


/* FOUR */
/**********************************************************/
/* Placing them in a Grid */
/**********************************************************/
/* .booms { */
/* 	grid-column: 1 / 2; */
/* 	grid-row: 1 / 2; */
/* } */

/* .molly { */
/* 	grid-column: 5 / 6; */
/* 	grid-row: 2 / 3; */
/* } */

/* .duke { */
/* 	grid-column: 3 / 4; */
/* 	grid-row: 3 / 4; */
/* } */
/* END FOUR */



/* FIVE */
/**********************************************************/
/* Remove Width (from .newf?) */
/**********************************************************/
/* END FIVE */













/* FIVE */
/**********************************************************/
/* A Well defined Grid*/
/**********************************************************/
/* .newf { */
/* 	background-postion: top; */
/* } */

/* .container { */
/* 	display: grid; */

/* 	/1* add another 1fr here. what does it do? *1/ */
/* 	grid-template-columns: [start] 100px [line1] 25% [line2] 1fr [booms-goes-here] 25% [line4] 120px [end]; */

/* 	grid-template-rows: [booms] 25% [molly] 100px [duke] auto [end]; */
/* } */


/* .booms { */
/* 	grid-column: booms-goes-here / line4; */
/* 	grid-row: booms / molly; */
/* } */

/* .molly { */
/* 	grid-column: start / line1; */
/* 	grid-row: molly / duke; */
/* } */

/* .duke { */
/* 	grid-column: line4 / end; */
/* 	grid-row: duke / end; */
/* } */
/* END FIVE */


/* SIX */
/**********************************************************/
/* contained sizing*/
/**********************************************************/
/* .newf { */
/* 	/1* what happens when you comment this out? *1/ */
/* 	box-sizing: border-box; */

/* 	/1* turning this on so that we always use the sizing of the grid *1/ */
/* 	height: 100%; */
/* 	width: 100%; */
/* } */

/* .container { */
/* 	/1* what happens when you comment this out? *1/ */
/* 	height: 600px; */
/* } */
/* END SIX */


/* SEVEN */
/**********************************************************/
/* more spacing */
/**********************************************************/
/* .newf { */
/* 	/1* what happens when you comment this out? *1/ */
/* 	/1* add grid-gap to compensate/show grid-gap (but it doesn't completely solve the problem) *1/ */
/* 	box-sizing: border-box; */

/* 	/1* turning this on so that we always use the sizing of the grid *1/ */
/* 	height: 100%; */
/* 	width: 100%; */
/* } */

/* .booms { */
/* 	grid-column: line1 / booms-goes-here; */

/* 	grid-row: booms / duke; */
/* } */
/* END SEVEN */


/* EIGHT */
/**********************************************************/
/* justification and alignment */
/**********************************************************/
/* .newf { */
/* 	/1* what happens when you comment this out? *1/ */
/* 	box-sizing: border-box; */

/* 	/1* turning this on so that we always use the sizing of the grid *1/ */
/* 	height: 200px; */
/* 	width: 200px; */
/* } */

/* .container { */
/* 	justify-items: center; */
/* 	align-items: center; */
/* } */

/* /1* can also override them on individual items *1/ */
/* .booms { */
/* 	justify-self: right; */
/* 	justify-self: end; */

/* 	/1* but bottom doesn't work!! *1/ */
/* 	/1* align-self: bottom; *1/ */ 
/* 	align-self: end; */
/* } */
/* END EIGHT */

css_grid.html

<!DOCTYPE html>
<html>
	<head lang='en-US'>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
		<meta content="utf-8" http-equiv="encoding">
		<link rel="stylesheet" href="file:///Users/jgandt/css_grid/css_grid.css">	
	</head>
	<body>


		<div class="container">

			<div class="baby-booms newf"></div>


			<!-- don't forget to comment out baby-booms -->
			<!-- <div class="booms newf"></div> -->
			<!-- <div class="molly newf"></div> -->
			<!-- <div class="duke newf"></div> -->

		</div>



		<!-- don't forget to comment out booms molly duke -->
		<!-- <script type="text/javascript" src="css_grid.js"></script> -->
	</body>
</html>

css_grid.js

pics = [
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-19/s320x320/12677659_1721021588169343_979663387_a.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c0.46.1080.1080/21820121_128856281095012_236449954078392320_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c70.0.939.939/21820309_153072121948254_1417145985691287552_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/e35/21690528_127339568007182_3918998464637173760_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c208.0.663.663/21819664_150360985557890_7741396629386690560_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c0.0.1080.1080/21577277_901248430024476_8646872522471505920_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/21689844_1952024761703956_6835237613163511808_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c0.35.1080.1080/21577068_147788162490537_1827012739063611392_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c0.135.1080.1080/21820305_736364179907864_4719241414087540736_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/21688600_127309201338536_6839084718449754112_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c0.101.1080.1080/21576384_1925218077695731_5127974433532674048_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/e15/c0.90.720.720/21576433_133162833971725_5895154024658763776_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/e35/c81.0.427.427/21436038_1230865813726456_8253795762626887680_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c0.133.1080.1080/21480477_1392050957583101_2336498501497651200_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/21479816_205285546675971_5357482797042761728_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/21480205_1428670133881920_5045485849991446528_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/21371790_354271465006057_3582267977749233664_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c2.0.1075.1075/21373365_1888599844725351_7043280335718580224_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/21296694_349272708860678_3327623708981329920_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c0.99.1080.1080/21373658_712268888965868_8000410507687231488_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/e15/c134.0.344.344/21296765_128222314484714_7483981471057707008_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c0.111.1080.1080/21371893_115832805790709_7994133954150006784_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/21149622_1438488729520629_7957598166306521088_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c118.0.843.843/21227137_134737620475962_4548294238168678400_n.jpg", 
  "https://instagram.fbos1-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c0.70.1080.1080/21224597_269664746856832_615597533686661120_n.jpg"
]
function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
}
pics = shuffleArray(pics);

function gridStyle() {
  return "1fr .5fr 2fr 1.25fr 1fr";
}

function columnStyle() {
  return "grid-template-columns: " + gridStyle() + ";";
}
function rowStyle() {
  return "grid-template-rows: " + gridStyle() + ";";
}
function alignStyle() {
  return "grid-auto-flow: columns;";
}
function widthStyle() {
  return "width: 1424px;";
}

var container = document.getElementsByClassName('container')[0];

container.style = columnStyle() + rowStyle() + widthStyle() + alignStyle();

var row = 1;
var column = 1;
pics.forEach(function(url){
  div = document.createElement('div');
  // uncomment these
  // rand1 = Math.ceil(Math.random() * 2) + 1;
  // rand2 = Math.ceil(Math.random() * 2) + 1;
  // style = "grid-area: " + row + " / " + column + " / span " + rand1 + " / span " + rand2 + "; background-image: url('"+url+"'); background-position: start start; height: 300px; width: 300px;";
  // div.style = style;
  // comment out this one
  div.style = "height: 300px; width: 300px; background-image: url(" + url + "); background-position: center center;";
  column = ((column + 1) % 4);
  if (column === 3) {
    row = ((row + 1) % 4);
  }

  container.appendChild(div);
});