grid-template-shorthand.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"			"http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>Grid Layout</title><link rel="stylesheet" type="text/css" href="c/style-insert-tests.css"><style type="text/css">.grid {display: grid; margin: 0 2em 2em; border: 1px solid black; position: relative;}.grid > * {border: 1px dotted red; margin: 3px;}div[id]::before {content: "#" attr(id);	position: absolute; bottom: 100%; right: 100%;	transform-origin: 100% 100%; transform: rotate(-90deg);	border: 1px solid gray;	background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.25) 67%, rgba(0,0,0,0.5));	padding: 0.25em 0.75em; margin: 0 1px 1px 0;	font: bold 1em "Consolas", "Courier New", monospace;}</style><style type="text/css" id="tests">#g1 {grid-template-columns: 2em 3fr minmax(10em,1fr) 2em;	grid-template-rows: 3em [main-start] 1fr [main-stop] 5em [page-end];	grid-template-areas:		"header header header header"		". content sidebar ." 		"footer footer footer footer" ;}#g2 {grid-template:		"header header header header" 3em		[main-start] ". content sidebar ." 1fr [main-stop]		"footer footer footer footer" 5em [page-end] /		2em 3fr minmax(10em,1fr) 2em;}#g3 {grid-template:  /* old syntax; should fail */		2em 3fr minmax(10em,1fr) 2em /		"header header header header" 3em		[main-start] ". content sidebar ." 1fr [main-stop]		"footer footer footer footer" 5em [page-end];}.header {grid-area: header;}.sidebar {grid-area: sidebar;}.content {grid-area: content;}.footer {grid-column: footer; grid-row: footer;}</style></head><body><div class="grid boxed lines" id="g1"><span class="header">header</span><span class="content">content</span><span class="footer">footer</span><span class="sidebar">sidebar</span></div><p>The following test should look exactly the same as the previous test:</p><div class="grid boxed lines" id="g2"><span class="header">header</span><span class="content">content</span><span class="footer">footer</span><span class="sidebar">sidebar</span></div><p>The following test should fail to lay out properly:</p><div class="grid boxed lines" id="g3"><span class="header">header</span><span class="content">content</span><span class="footer">footer</span><span class="sidebar">sidebar</span></div></body></html>