rafszul · February 15, 2017 23:56
diff --git a/grid-layout-spans.markdown b/grid-layout-spans.markdown
diff --git a/index.html b/index.html
 <div class="layout">
  <div class="img img-1"></div>
  <div class="img img-2"></div>
  <div class="img img-3"></div>
  <div class="img img-4"></div>
  <div class="img img-5"></div>
 </div>
diff --git a/scripts b/scripts
 <script src="http://codepen.io/g12n/pen/pjeEBj"></script>
diff --git a/style.scss b/style.scss
 .layout{
  width: 60vw; 
  height: 80vh;
  display: grid;
  grid-template-rows: repeat(3, minmax(max-content, 1fr));
  grid-template-columns: repeat(3, minmax(max-content, 1fr));
  padding: 10px;
 }
 .img{margin:10px;}
 .img-1{
  grid-row-start:1;
  grid-row-end:2;
  grid-column-start:1;
  grid-column-end:3;
 }
 .img-4{
  grid-column: 1 / 4 ;
  grid-row: 3
 }
 .img-5 {
  grid-column: auto / span 2;

 }

diff --git a/styles b/styles
 <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" />
 <link href="http://codepen.io/g12n/pen/pjeEBj" rel="stylesheet" />
	.layout{
	width: 60vw;
	height: 80vh;
	display: grid;
	grid-template-rows: repeat(3, minmax(max-content, 1fr));
	grid-template-columns: repeat(3, minmax(max-content, 1fr));
	padding: 10px;
	}
	.img{margin:10px;}
	.img-1{
	grid-row-start:1;
	grid-row-end:2;
	grid-column-start:1;
	grid-column-end:3;
	}
	.img-4{
	grid-column: 1 / 4 ;
	grid-row: 3
	}
	.img-5 {
	grid-column: auto / span 2;

	}
	<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" />
	<link href="http://codepen.io/g12n/pen/pjeEBj" rel="stylesheet" />