I’m uncertain this is going to work as a Grid Paul. The reason I say that is because this isn’t going to be a static file: different fonts will appear; the order of the rows will change – including and most particularly the very first row.
What I’m concerned about is the extent to which your code is inheritable. Or maybe we can change it to be more durable to content changes that will upset the order.
And different fonts will appear. Here for example is an expanded catalog of fonts . . . and styles to match them. As you can see from the output I’ve obviously upset something by introducing another 8 fonts (12 total, not counting Roboto Slab on the body and a few extra that I want available but not for this table).
I can see in places where you’ve carefully introduced blocks of code for just the 4 fonts you understood represented the entire catalog of fonts. My bad.
It seems Grid is ideal for a static design but mine will be dynamic and if we have to lock in any position – for any font – to make it work the page breaks the minute I introduce fresh content . . . or remove any. Do you see what I’m saying?
Please look at the code I’m posting below. It is rife with errors but I can’t understand where they are because I have no experience with Grid.
And below the code I’ll upload an extended screenshot for one specific reason: the margins are off by not a little bit. At the top are 2 lavender bars, one each side. I should be seeing the slimmed-down left and right margins of 5% that I/we rewrote. The width of each of these bars is 54px (5% of my screen width, everything else being equal.). So they are off by a not-small bit and on a small screen like my phone (1080px) I badly want the enlarged real estate.
’nuff about margins. Following is a creative adaptation which shows just how much I know about Grid: NOTHING! It is of course not even remotely the outcome I want but you’ll probably have no trouble instantly seeing my errors. So – font changes + an extended screenshot below the code.
Feel free to hop in here Dave. Do you know if ROWSPAN can be represented in a Flex Table? I’d like to hear about it. Because I have a feeling my project is way too volatile an environment for Grid . . .
–semicodin
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Chicle&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Encode+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Encode+Sans+Semi+Condensed:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Encode+Sans+Condensed:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Meddon&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=New+Rocker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ribeye+Marrow&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sancreek&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
<TITLE>96 GRID ᰄ “Tables-B-Gone” by Paul O’Brien</TITLE>
<style>
/*lower case for selectors please */
html,
body {
margin: 0;
padding: 0;
}
p {
margin: 0 0 1rem;
}
body {
margin: 5% 2.5rem;
font-size: 1rem;
line-height: 1;
font-weight: 500;
font-family: "Roboto Slab", sans-serif;
}
.container {
display: grid;
margin: 0 auto;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"header1 header2"
"cou cre"
"cou hen"
"cou met";
border-bottom: 6px solid black;
}
.container > div:nth-of-type(odd){background-color: #FFFFCC}
.container > div:nth-of-type(even){background-color: white}
.col1header,
.col2header {
margin: 0;
background: black;
color: #fff;
font-size: 1rem;
padding: 8px;
text-align: center;
line-height: 1;
font-weight: 600;
font-family: "Roboto Slab", sans-serif;
border: 6px groove #00FFFF;
border-top-color: #00FFFF;
border-left-color: #00FFFF;
}
.col1header {
grid-area: header1;
border-right: none;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.col2header {
grid-area: header2;
border-left: none;
}
.cal {
grid-area: cal;
background-color: white;
line-height: 1.5;
font-weight: 600;
font-size: 1rem;
font-family: "Calistoga";
}
.chi {
grid-area: chi;
background-color: white;
line-height: 1.5;
font-weight: 600;
font-size: 1rem;
font-family: "Chicle Display";
}
.cou {
grid-area: cou;
background-color: white;
line-height: 1;
font-weight: 700;
font-size: 1rem;
font-family: "COURIER PRIME", monospace;
}
.cre {
grid-area: cre;
background-color: white;
font-style: italic;
line-height: 1.1;
font-weight: 400;
font-size: 1rem;
font-family: "CRETE ROUND", serif;
}
.enc {
grid-area: enc;
background-color: white;
line-height: 1.5;
font-weight: 600;
font-size: 1rem;
font-family: "Encode Sans Semi Condensed";
}
.hen {
grid-area: hen;
background-color: white;
line-height: 1.5;
font-weight: 400;
font-size: 1rem;
font-family: "HENNY PENNY";
}
.med {
grid-area: med;
background-color: white;
line-height: 1.5;
font-weight: 600;
font-size: 1rem;
font-family: "Meddon";
}
.met {
grid-area: met;
background-color: white;
line-height: 1;
font-weight: 400;
font-size: 1rem;
font-family: "METAL MANIA";
}
.new {
grid-area: new;
background-color: white;
line-height: 1.5;
font-weight: 600;
font-size: 1rem;
font-family: "New Rocker";
}
.rib {
grid-area: rib;
background-color: white;
line-height: 1.5;
font-weight: 600;
font-size: 1rem;
font-family: "Ribeye Marrow";
}
.rob {
grid-area: rob;
background-color: white;
line-height: 1.5;
font-weight: 600;
font-size: 1rem;
font-family: "Roboto Slab";
}
.san {
grid-area: san;
background-color: white;
line-height: 1.5;
font-weight: 600;
font-size: 1rem;
font-family: "Sancreek";
}
.unc {
grid-area: unc;
background-color: white;
line-height: 1.5;
font-weight: 600;
font-size: 1rem;
font-family: "Uncial Antiqua";
}
.cou,
.cre,
.hen,
.met {
padding: 6px;
}
.cou {
border-left: 6px solid black;
border-right: 1px solid black;
}
.cre,
.hen,
.met {
border-left: 1px solid black;
border-right: 6px solid black;
border-bottom: 2px solid black;
}
.met {
border-bottom: none;
}
.font-name {
text-transform: uppercase; /* Let css handle presentation not the mark up*/
}
</style>
</head>
<body>
<div class="container">
<h2 class="col1header">Header for the left Column</h2>
<!-- Paul, I parked this here temporarily: -->
<h2 class="col2header">Header for the right Column with more text to wrap</h2>
<div class="CAL">
<p>This is a sample of the Google Font
<span class="font-name">“Calistoga”</span> – a bold serif.</p>
</div>
<div class="CHI">
<p>This is a sample of the Google Font
<span class="font-name">“Chicle”</span>
– a condensed, “groovy” font in a bold weight</p>
</div>
<div class="COU">
<p>This is a sample of the (bolded) Google Font
<span class="font-name">“Courier Prime”</span>
– a Monospace font developed by Mozilla!</p>
</div>
<div class="CRE">
<p>This is a sample of the Google Font <i>
<span class="font-name">“Crete Round”</span>
</i> – shown here italicized</p>
</div>
<div class="ENC">
<p>This is a sample of the Google Font
<span class="font-name">“Encode Sans Semi Condensed”</span>
– a clean sans-serif – with multiple condensed versions and generous font weights – from the foundry Impallari Type</p>
</div>
<div class="HEN">
<p>This is a sample of the Google Font
<span class="font-name">“HENNY PENNY”</span>
– <b>a playful display font</b> by font developer “brownfox”</p>
</div>
<div class="MED">
<p>This is a sample of the Google Font
<span class="font-name">“Meddon”</span>
– an authentic ‘quill handwriting’ font from font developer Vernon Adams</p>
</div>
<div class="MET">
<p>This is a sample of the Google Font
<span class="font-name">“Metal Mania”</span>
– a Gothic font rendered in small caps, particularly suited to <b>SHAKESPEARE EXCERPTS</b> I have found.</p>
</div>
<div class="NEW">
<p>This is a sample of the Google Font
<span class="font-name">“New Rocker”</span> – another quality font from the foundry Impallari Type, this one <b>a Gothic font</b> borrowing heavily from “Blackletter” and “Olde English” (but readable!)</p>
</div>
<div class="RIB">
<p>This is a sample of the Google Font
<span class="font-name">“Ribeye Marrow”</span>
– a playful font by “Astigmatic” very popular in the 1930s and frequently used in greeting cards. A solid version is also available.</p>
</div>
<div class="SAN">
<p>This is a sample of the Google Font
<span class="font-name">“Sancreek”</span>
– a bold, mixed-case font evoking the Circus; another entry from font developer Vernon Adams</p>
</div>
<div class="UNC">
<p>This is a sample of the Google Font
<span class="font-name">“Uncial Antiqua”</span>
– a style used throughout the early Middle Ages, heavily used in manuscripts of the era</p>
</div>
</div>
</body>
</html>
semicodin
