csstdg5figs/12-grid-layout/subgrid-grid-gaps.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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!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>The effect of adding gaps to a subgrid</title>
<link rel="stylesheet" type="text/css" href="c/grid-baseline.css">
<style type="text/css">
@import url(c/subgrid-baseline.css);
body > *:not(#null) {padding-inline: 0;}
header.site > * {background: hsla(0deg,50%,50%,0.25);}
footer.site > * {background: hsla(240deg,50%,50%,0.25);}
main > * {background: hsla(120deg,50%,50%,0.25);}

header.site {display: grid; grid-template-columns: subgrid;}
header.site h1 {grid-column: 2 / span 5;}
header.site nav {grid-column: span 7 / -2; align-self: center; text-align: end;}

footer.site > .rowline {grid-column: 1 / -1; grid-row: 2;
	background: transparent; border-top: 1px dashed #000A;}
footer.site {display: grid; grid-template-columns: subgrid; grid-template-rows: repeat(2,auto);}
footer.site img {grid-column: 5; grid-row: 1 / -1;}
footer.site nav {grid-column: 9 / -2; }
footer.site div {grid-column: span 7 / -2;}
</style>
<style type="text/css">
body {display: grid; grid-template-columns: repeat(16,1fr); grid-template-rows: repeat(3,min-content);}
:is(header, footer).site {grid-column: 1 / -1;}

main {display: grid; grid-template-columns: subgrid [] [leadin-start] repeat(5, []) [leadin-end explore-start] repeat(5, []) [explore-end]; grid-column: 2 / -2; grid-gap: 0 2em;}
.gallery {display: grid; grid-template-columns: subgrid; grid-column: 2 / -2;}
.gallery > div {grid-column: span 2; padding: 0.5em; border: 1px solid; background: #FFF8;}
.gallery > div img {width: 100%; max-width: none;}
.gallery > div h2 {margin-block: 0.25em 0;}
.gallery > div p {margin-block: 0.25em 0;}
main p.leadin  {grid-column: leadin-start /  leadin-end;}
main p.explore {grid-column: explore-start / explore-end;}
</style>
</head>
<body>
	<header class="site">
		<h1>ConHugeCo</h1>
		<nav>
			<a href="…">Home</a>
			<a href="…">Mission</a>
			<a href="…">Products</a>
			<a href="…">Services</a>
			<a href="…">Support</a>
			<a href="…">Contact</a>
		</nav>
	</header>
	<main>
		<div class="gallery">
			<div><img src="i/x-box.png" alt=""><h2>Lorem</h2><p>Ipsum eu. Jesse owens warrensville heights tempor dolor.</p></div>
			<div><img src="i/x-box.png" alt=""><h2>Ipsum</h2><p> Bowling processus woodmere sed. Sammy kaye putamus jim lovell highland heights.</p></div>
			<div><img src="i/x-box.png" alt=""><h2>Dolor</h2><p>Videntur hal holbrook george steinbrenner drew carey.</p></div>
			<div><img src="i/x-box.png" alt=""><h2>Sit</h2><p>Est fred willard ozzie newsome humanitatis.</p></div>
			<div><img src="i/x-box.png" alt=""><h2>Amet</h2><p>Uss cod ex independence lakewood iusto municipal stadium.</p></div>
			<div><img src="i/x-box.png" alt=""><h2>Consectetur adipiscing</h2><p>Euismod collision bend. Nunc consectetuer. Dolore litterarum.</p></div>
		</div>
		<p class="leadin">Wisi kenny lofton browns habent legentis strongsville. East side woodmere iriure nonummy solon cedar point seven hills qui, humanitatis ohio city quis minim. Laoreet drew carey lectores cuyahoga valley. Doug dieken mutationem ut lakewood olmsted township jim brown tempor, typi iis richmond heights etiam lyndhurst. Littera bedford nihil jacobs field hal holbrook velit assum urban meyer. Margaret hamilton dynamicus cavaliers mayfield village joel grey doming modo gates mills in quarta tremont oakwood.</p>
		<p class="explore">Henry mancini brecksville ut consectetuer ipsum metroparks zoo james a. garfield legere superhost molly shannon. Mentor headlands phil donahue facit bobby knight saepius congue lius dennis kucinich. Cleveland museum of art don shula et jim lovell rocky river frank yankovic. Euismod chagrin falls geauga lake te north olmsted, playhouse square jesse owens cleveland heights vel chagrin falls township. Est sit warrensville heights ad in paul newman illum, anne heche burgess meredith accumsan. Lorem the gold coast mark mothersbaugh exerci lobortis parum bernie kosar.</p>
	</main>
	<footer class="site">
		<img src="i/conhugeco.png" class="logo">
		<nav>
			<a href="…">Home</a>
			<a href="…">Mission</a>
			<a href="…">Products</a>
			<a href="…">Services</a>
			<a href="…">Support</a>
			<a href="…">Contact</a>
		</nav>
		<div class="sosumi">Copyleft 2112 ConHugeCo Inc. All lefts reserved.</div>
	</footer>

<ul class="lines">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li
<ul>

</body>
</html>