greenfox1505/DisplayGridAngular.html

## DisplayGridAngular.html
<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	<style>
		body { background: black;}
		.GridTest {
			display: grid;
			grid-template-columns: repeat(1,1fr);
			grid-gap: 20px;
		}
		.GridTest > div {
			border: 2px;
			background: blue;
			border-style: solid;
			border-color: #888;
			padding: 5px
		}
		.GridTest > .Box {
			grid-column: span 1;
		}
		.Row {
			grid-column: span 1;
		}

		.GridTest > div > h1 {
			background: black;
			color: white;
			margin: 16px;
		}
		.GridTest > div > p {
			background: white;
			color: black;
			margin: 8px;
		}
		@media screen and (min-width: 480px) {.GridTest {grid-template-columns: repeat(2,1fr);}.Row{grid-column:span 2}}
		@media screen and (min-width: 720px) {.GridTest {grid-template-columns: repeat(3,1fr);}.Row{grid-column:span 3}}
		@media screen and (min-width: 960px) {.GridTest {grid-template-columns: repeat(4,1fr);}.Row{grid-column:span 4}}
		@media screen and (min-width: 1200px) {.GridTest {grid-template-columns: repeat(5,1fr);}.Row{grid-column:span 5}}
		@media screen and (min-width: 1440px) {.GridTest {grid-template-columns: repeat(6,1fr);}.Row{grid-column:span 6}}
	</style>
	<title>Angular/CSSGrid Starting Point</title>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
	<div class="GridTest">
		<div class="Row"><h1>{{Title}}</h1></div>
		<div class="Box" ng-repeat="x in records">
			<h1>{{x.name}}</h1>
			<p>NUMBER: {{x.number}}</p>
			<p>TEST: {{x.text}}</p>
		</div>
	</div>
	<script>
	var app = angular.module("myApp", []);
	app.controller("myCtrl", function($scope) {
	  $scope.records = [
		{ name:"Alpha",number:12,text:"qwer"},
		{ name:"Beta",number:23,text:"asdf"},
		{ name:"Gamma",number:123,text:"zxcv"},
		{ name:"Theta",number:3,text:"1234"},
		{ name:"1234Alpha",number:142,text:"qwer"},
		{ name:"sdfgBeta",number:2133,text:"asdf"},
		{ name:"Gaqwermma",number:12123,text:"zxcv"},
		{ name:"Theasdfta",number:32,text:"1234"}
	  ]
	  $scope.Title = "Test Title"
	});
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	<style>
	body { background: black;}
	.GridTest {
	display: grid;
	grid-template-columns: repeat(1,1fr);
	grid-gap: 20px;
	}
	.GridTest > div {
	border: 2px;
	background: blue;
	border-style: solid;
	border-color: #888;
	padding: 5px
	}
	.GridTest > .Box {
	grid-column: span 1;
	}
	.Row {
	grid-column: span 1;
	}

	.GridTest > div > h1 {
	background: black;
	color: white;
	margin: 16px;
	}
	.GridTest > div > p {
	background: white;
	color: black;
	margin: 8px;
	}
	@media screen and (min-width: 480px) {.GridTest {grid-template-columns: repeat(2,1fr);}.Row{grid-column:span 2}}
	@media screen and (min-width: 720px) {.GridTest {grid-template-columns: repeat(3,1fr);}.Row{grid-column:span 3}}
	@media screen and (min-width: 960px) {.GridTest {grid-template-columns: repeat(4,1fr);}.Row{grid-column:span 4}}
	@media screen and (min-width: 1200px) {.GridTest {grid-template-columns: repeat(5,1fr);}.Row{grid-column:span 5}}
	@media screen and (min-width: 1440px) {.GridTest {grid-template-columns: repeat(6,1fr);}.Row{grid-column:span 6}}
	</style>
	<title>Angular/CSSGrid Starting Point</title>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
	<div class="GridTest">
	<div class="Row"><h1>{{Title}}</h1></div>
	<div class="Box" ng-repeat="x in records">
	<h1>{{x.name}}</h1>
	<p>NUMBER: {{x.number}}</p>
	<p>TEST: {{x.text}}</p>
	</div>
	</div>
	<script>
	var app = angular.module("myApp", []);
	app.controller("myCtrl", function($scope) {
	$scope.records = [
	{ name:"Alpha",number:12,text:"qwer"},
	{ name:"Beta",number:23,text:"asdf"},
	{ name:"Gamma",number:123,text:"zxcv"},
	{ name:"Theta",number:3,text:"1234"},
	{ name:"1234Alpha",number:142,text:"qwer"},
	{ name:"sdfgBeta",number:2133,text:"asdf"},
	{ name:"Gaqwermma",number:12123,text:"zxcv"},
	{ name:"Theasdfta",number:32,text:"1234"}
	]
	$scope.Title = "Test Title"
	});
	</script>
	</body>
	</html>