Last active
August 23, 2020 14:27
-
-
Save ungoldman/3475ab060a1249700bf80fcced0da6c3 to your computer and use it in GitHub Desktop.
table grid example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en" class="element"> | |
<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>grid experiment</title> | |
<link rel="stylesheet" href="https://elementcss.neocities.org/dist/element-0.0.1.min.css"> | |
<style> | |
table { width: 100%; table-layout: fixed; } | |
tr { vertical-align: top } | |
</style> | |
</head> | |
<body> | |
<table> | |
<tr> | |
<td> | |
<h3>Grid Column 1</h3> | |
<p> | |
Inspired by <a href="http://chrisnager.github.io/ungrid/">ungrid</a>, Elemental wires up <code><div></code> to be a row | |
and <code><span></code> to be a column, using a clever CSS hack to make an easy, auto-sized, responsive grid that Just Works. | |
</p> | |
</td> | |
<td> | |
<h3>Grid Column 2</h3> | |
<p> | |
I've had twelve years to think about it. And if I had it to do over again, I would have grabbed the phaser and pointed it | |
at you instead of them. Not if I weaken first. For an android with no feelings, he sure managed to evoke them in others. | |
Why don't we just give everybody a promotion and call it a night - 'Commander'? When has justice ever been as simple as | |
a rule book? | |
</p> | |
</td> | |
</tr> | |
</table> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment