jafstar/cssGrid1.html

## cssGrid1.html
<!DOCTYPE html>
<html>
<head>
	<title>CSS Grid Test</title>
</head>
<body>

<div class="wrapper">
	<div class="header"></div>
	<div class="menu">
		<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</div>

	<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse felis velit, lobortis a enim ac, placerat feugiat ipsum. Duis lacinia commodo mauris, a malesuada ipsum scelerisque non. Vivamus euismod dui diam, vitae molestie dui fermentum in. Aenean eget turpis ut mi feugiat fringilla vitae et ligula. Praesent eu rhoncus massa. Proin varius erat magna, et tincidunt quam rutrum sit amet. Phasellus dignissim neque malesuada suscipit vulputate.

Proin dolor velit, commodo eu mi eu, vehicula tempor elit. Sed ac magna vitae ex vulputate fringilla euismod a ipsum. Ut convallis, nunc vel vulputate facilisis, leo lectus pulvinar arcu, eget fermentum dui metus vel augue. Fusce viverra ipsum arcu, at molestie ante venenatis quis. Nullam ultricies rutrum magna quis consequat. Duis convallis massa luctus, venenatis erat a, rhoncus augue. Cras lorem diam, tempus vel neque nec, luctus tempor lectus. Integer placerat dolor eu ex interdum posuere. Fusce quis turpis vel libero interdum fermentum. Sed porttitor faucibus erat, id congue lectus. Morbi vitae lorem odio.

Etiam sed risus aliquam diam consectetur hendrerit at id enim. Morbi ultrices odio eu ex blandit dictum. Ut euismod arcu massa, sit amet volutpat lectus laoreet id. Mauris ligula libero, gravida nec ante id, tempor eleifend sapien. Duis molestie, lectus sed consectetur bibendum, libero turpis posuere libero, et ullamcorper tellus eros at libero. Suspendisse justo est, rutrum nec aliquam a, placerat vel mi. Integer egestas tempor lacinia. Maecenas eu rhoncus tortor. Cras quis tortor eu dui lobortis condimentum eu id libero. Donec dapibus volutpat tellus, sed vestibulum turpis tristique vitae. Curabitur sit amet porta libero, eu semper magna. Quisque vel ante nisi. Praesent efficitur efficitur dui, quis aliquet massa ultricies quis. Curabitur gravida velit dolor, vitae aliquet mauris rutrum quis.

Vestibulum dui leo, venenatis in fringilla sed, semper at ex. Phasellus vitae commodo risus, ac condimentum erat. Donec lacinia pulvinar fringilla. Praesent lacinia non dui a posuere. In hac habitasse platea dictumst. Integer vulputate leo a congue dignissim. Nam eleifend ipsum sed odio mollis maximus. Donec consequat dui sed lectus condimentum, sit amet pulvinar magna pulvinar. Nullam at felis ac sem tristique auctor malesuada auctor augue. Pellentesque non congue dui. Nam convallis, quam sed egestas auctor, diam nibh placerat orci, at tincidunt dui diam pretium sapien. Duis ac varius eros, quis luctus neque. Pellentesque nec sem eu neque blandit tristique eu id metus.

Nulla euismod purus eget lectus aliquam lacinia. Donec venenatis tristique dui ut convallis. Cras bibendum consequat turpis, scelerisque auctor neque. Maecenas pharetra iaculis eros ut convallis. Pellentesque imperdiet maximus ligula, sit amet semper libero tempor vel. Nunc eget sapien quam. Vestibulum sit amet lectus et augue convallis vulputate. Duis ultrices dignissim maximus. Duis eu volutpat neque, vitae varius massa.</p></div>
	<div class="footer"></div>
</div>


<style>
*{
	padding: 0px;
	margin: 0px;
}
	body {
		background: #fff;
	}

	.wrapper {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 140px auto 40px;
	}

	.header {
		grid-column: span 12;
		background: #ccc;
		position: sticky;
		top: 0px;
		z-index: 100;
	}

	.menu {
		width: 8vw;
		height: 20vh;
		background: #dcdcdc;
		position: fixed;
		top: 148px;
	}

	.content {

     	grid-column-start: 2;
     	grid-column-end: 14;

		background: #eee;
		padding: 20px;

		position: relative;
		line-height: 190%;
	}

	.footer {
		grid-column: span 12;
		background: #999;
		position: sticky;
		bottom: 0px;
	}
</style>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS Grid Test</title>
	</head>
	<body>

	<div class="wrapper">
	<div class="header"></div>
	<div class="menu">
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">News</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
	</div>

	<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse felis velit, lobortis a enim ac, placerat feugiat ipsum. Duis lacinia commodo mauris, a malesuada ipsum scelerisque non. Vivamus euismod dui diam, vitae molestie dui fermentum in. Aenean eget turpis ut mi feugiat fringilla vitae et ligula. Praesent eu rhoncus massa. Proin varius erat magna, et tincidunt quam rutrum sit amet. Phasellus dignissim neque malesuada suscipit vulputate.

	Proin dolor velit, commodo eu mi eu, vehicula tempor elit. Sed ac magna vitae ex vulputate fringilla euismod a ipsum. Ut convallis, nunc vel vulputate facilisis, leo lectus pulvinar arcu, eget fermentum dui metus vel augue. Fusce viverra ipsum arcu, at molestie ante venenatis quis. Nullam ultricies rutrum magna quis consequat. Duis convallis massa luctus, venenatis erat a, rhoncus augue. Cras lorem diam, tempus vel neque nec, luctus tempor lectus. Integer placerat dolor eu ex interdum posuere. Fusce quis turpis vel libero interdum fermentum. Sed porttitor faucibus erat, id congue lectus. Morbi vitae lorem odio.

	Etiam sed risus aliquam diam consectetur hendrerit at id enim. Morbi ultrices odio eu ex blandit dictum. Ut euismod arcu massa, sit amet volutpat lectus laoreet id. Mauris ligula libero, gravida nec ante id, tempor eleifend sapien. Duis molestie, lectus sed consectetur bibendum, libero turpis posuere libero, et ullamcorper tellus eros at libero. Suspendisse justo est, rutrum nec aliquam a, placerat vel mi. Integer egestas tempor lacinia. Maecenas eu rhoncus tortor. Cras quis tortor eu dui lobortis condimentum eu id libero. Donec dapibus volutpat tellus, sed vestibulum turpis tristique vitae. Curabitur sit amet porta libero, eu semper magna. Quisque vel ante nisi. Praesent efficitur efficitur dui, quis aliquet massa ultricies quis. Curabitur gravida velit dolor, vitae aliquet mauris rutrum quis.

	Vestibulum dui leo, venenatis in fringilla sed, semper at ex. Phasellus vitae commodo risus, ac condimentum erat. Donec lacinia pulvinar fringilla. Praesent lacinia non dui a posuere. In hac habitasse platea dictumst. Integer vulputate leo a congue dignissim. Nam eleifend ipsum sed odio mollis maximus. Donec consequat dui sed lectus condimentum, sit amet pulvinar magna pulvinar. Nullam at felis ac sem tristique auctor malesuada auctor augue. Pellentesque non congue dui. Nam convallis, quam sed egestas auctor, diam nibh placerat orci, at tincidunt dui diam pretium sapien. Duis ac varius eros, quis luctus neque. Pellentesque nec sem eu neque blandit tristique eu id metus.

	Nulla euismod purus eget lectus aliquam lacinia. Donec venenatis tristique dui ut convallis. Cras bibendum consequat turpis, scelerisque auctor neque. Maecenas pharetra iaculis eros ut convallis. Pellentesque imperdiet maximus ligula, sit amet semper libero tempor vel. Nunc eget sapien quam. Vestibulum sit amet lectus et augue convallis vulputate. Duis ultrices dignissim maximus. Duis eu volutpat neque, vitae varius massa.</p></div>
	<div class="footer"></div>
	</div>


	<style>
	*{
	padding: 0px;
	margin: 0px;
	}
	body {
	background: #fff;
	}

	.wrapper {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 140px auto 40px;
	}

	.header {
	grid-column: span 12;
	background: #ccc;
	position: sticky;
	top: 0px;
	z-index: 100;
	}

	.menu {
	width: 8vw;
	height: 20vh;
	background: #dcdcdc;
	position: fixed;
	top: 148px;
	}

	.content {

	grid-column-start: 2;
	grid-column-end: 14;

	background: #eee;
	padding: 20px;

	position: relative;
	line-height: 190%;
	}

	.footer {
	grid-column: span 12;
	background: #999;
	position: sticky;
	bottom: 0px;
	}
	</style>

	</body>
	</html>