csstdg5figs/12-grid-layout/attaching-implicit-grid-lines.html at main · meyerweb/csstdg5figs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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>Attaching to implicit grid lines via grid-area names</title>
<link rel="stylesheet" type="text/css" href="c/grid-baseline.css">
<style type="text/css">
	#grid {display: grid;
		grid:
			"header header"
			"sidebar content" 5em
			"footer footer" / 25% 75%;}
	#header {grid-row: header / header; grid-column: header;}
	#footer {grid-row: footer; grid-column: footer-start / footer-end;}

span[class*="box"] {z-index: 1;}
span.explicit {background: #DDD; grid-area: 1 / 1 / 3 / 6;}
</style>
</head>
<body>

<div class="grid boxed gridlines" id="grid">
<span class="box01" id="header">header</span>
<span class="box02" id="footer">footer</span>
</div>

</body>
</html>