mikeplate/cssgrid.html

## cssgrid.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Grid</title>
    <style>
    body {
        margin: 0px;
    }
    .container {
        display: -ms-grid;
        display: grid;
        -ms-grid-rows: 33.3% 33.3% 33.3%;
        grid-template-rows: 33.3% 33.3% 33.3%;
        -ms-grid-columns: 33.3% 33.3% 33.3%;
        grid-template-columns: 33.3% 33.3% 33.3%;

        width: 100%;
        height: 100%;
    }
    .container > div {
        font-size: 1.5em;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding: 20px;
        overflow-y: auto;
    }
    .container p {
        margin: 0px 0px 1.5em 0px;
    }
    .block1 {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 3;
        background-color: #339;
        color: #fff;
    }
    .block2 {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 3;
        grid-column-end: 4;
        background-color: #393;
        color: #fff;
    }
    .block3 {
        -ms-grid-row: 2;
        -ms-grid-column: 3;
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 3;
        grid-column-end: 4;
        background-color: #933;
        color: #fff;
    }
    .block4 {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 2;
        background-color: #399;
        color: #fff;
    }
    .block5 {
        -ms-grid-row: 3;
        -ms-grid-column: 2;
        -ms-grid-column-span: 2;
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 2;
        grid-column-end: 4;
        background-color: #993;
        color: #fff;
    }
    .header {
        padding: 10px;
        margin: 10px;
    }
    h1 {
        padding: 0px;
        margin: 0px;
    }
    </style>
</head>
<body>
    <div class="header">
        <h1>CSS Grid</h1>
    </div>
    <div class="container">
        <div class="block1">
            BLOCK 1
        </div>
        <div class="block2">
            <p>BLOCK 2</p>
            <p>
                Grid Layout is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents.
                Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment
                of content is desired in both dimensions.
            </p>
            <p>
                In addition, due to its ability to explicitly position items in the grid, Grid Layout allows dramatic transformations in visual layout
                structure without requiring corresponding markup changes. By combining media queries with the CSS properties that control layout of the
                grid container and its children, authors can adapt their layout to changes in device form factors, orientation, and available space,
                while preserving a more ideal semantic structuring of their content across presentations.
            </p>
            <p>
                Although many layouts can be expressed with either Grid or Flexbox, they each have their specialties. Grid enforces 2-dimensional alignment,
                uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on
                space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to
                control its secondary axis, and relies on the underlying markup hierarchy to build more complex layouts. It is expected that both will be
                valuable and complementary tools for CSS authors.
            </p>
        </div>
        <div class="block3">
           BLOCK 3
        </div>
        <div class="block4">
            BLOCK 4
        </div>
        <div class="block5">
            BLOCK 5
        </div>
    </div>
    <script>
        function onResize() {
            var container = document.querySelector(".container");
            var rect = container.getBoundingClientRect();
            var height = window.innerHeight - rect.top;
            container.style.height = height + "px";
        }
        window.addEventListener("resize", onResize, false);
        onResize();
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS Grid</title>
	<style>
	body {
	margin: 0px;
	}
	.container {
	display: -ms-grid;
	display: grid;
	-ms-grid-rows: 33.3% 33.3% 33.3%;
	grid-template-rows: 33.3% 33.3% 33.3%;
	-ms-grid-columns: 33.3% 33.3% 33.3%;
	grid-template-columns: 33.3% 33.3% 33.3%;

	width: 100%;
	height: 100%;
	}
	.container > div {
	font-size: 1.5em;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	padding: 20px;
	overflow-y: auto;
	}
	.container p {
	margin: 0px 0px 1.5em 0px;
	}
	.block1 {
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	-ms-grid-column: 1;
	-ms-grid-column-span: 2;
	grid-row-start: 1;
	grid-row-end: 3;
	grid-column-start: 1;
	grid-column-end: 3;
	background-color: #339;
	color: #fff;
	}
	.block2 {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 3;
	grid-column-end: 4;
	background-color: #393;
	color: #fff;
	}
	.block3 {
	-ms-grid-row: 2;
	-ms-grid-column: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	grid-column-start: 3;
	grid-column-end: 4;
	background-color: #933;
	color: #fff;
	}
	.block4 {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
	grid-row-start: 3;
	grid-row-end: 4;
	grid-column-start: 1;
	grid-column-end: 2;
	background-color: #399;
	color: #fff;
	}
	.block5 {
	-ms-grid-row: 3;
	-ms-grid-column: 2;
	-ms-grid-column-span: 2;
	grid-row-start: 3;
	grid-row-end: 4;
	grid-column-start: 2;
	grid-column-end: 4;
	background-color: #993;
	color: #fff;
	}
	.header {
	padding: 10px;
	margin: 10px;
	}
	h1 {
	padding: 0px;
	margin: 0px;
	}
	</style>
	</head>
	<body>
	<div class="header">
	<h1>CSS Grid</h1>
	</div>
	<div class="container">
	<div class="block1">
	BLOCK 1
	</div>
	<div class="block2">
	<p>BLOCK 2</p>
	<p>
	Grid Layout is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents.
	Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment
	of content is desired in both dimensions.
	</p>
	<p>
	In addition, due to its ability to explicitly position items in the grid, Grid Layout allows dramatic transformations in visual layout
	structure without requiring corresponding markup changes. By combining media queries with the CSS properties that control layout of the
	grid container and its children, authors can adapt their layout to changes in device form factors, orientation, and available space,
	while preserving a more ideal semantic structuring of their content across presentations.
	</p>
	<p>
	Although many layouts can be expressed with either Grid or Flexbox, they each have their specialties. Grid enforces 2-dimensional alignment,
	uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on
	space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to
	control its secondary axis, and relies on the underlying markup hierarchy to build more complex layouts. It is expected that both will be
	valuable and complementary tools for CSS authors.
	</p>
	</div>
	<div class="block3">
	BLOCK 3
	</div>
	<div class="block4">
	BLOCK 4
	</div>
	<div class="block5">
	BLOCK 5
	</div>
	</div>
	<script>
	function onResize() {
	var container = document.querySelector(".container");
	var rect = container.getBoundingClientRect();
	var height = window.innerHeight - rect.top;
	container.style.height = height + "px";
	}
	window.addEventListener("resize", onResize, false);
	onResize();
	</script>
	</body>
	</html>