grid-vs-subgrid.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Grids vs. Subgrids</title>
<link rel="stylesheet" type="text/css" href="c/style-insert-tests.css">
<style type="text/css">
form {position: relative;}
form[id]::before {content: "#" attr(id);
	position: absolute; bottom: 100%; right: 100%;
	transform-origin: 100% 100%; transform: rotate(-90deg);
	background: linear-gradient(to bottom, black 1px, rgba(216,192,0,0.3) 1px, rgba(216,192,0,0.2));
	padding: 0.25em 0.75em 0;
	font: bold 1em "Consolas", "Courier New", monospace;}
</style>
<style type="text/css" id="tests">
form {width: 30em; margin: 2em; padding: 1em; background: rgba(216,192,0,0.2);}
form ul {margin: 0; padding: 0;}
form ul li {border: 1px dotted red; margin: 2px 0; padding: 2px;}

form#form1 ul li {display: grid;
	grid-template-columns: [start label] max-content [input] 1fr [end];}

form#form2 ul li {display: grid;
	grid-template-columns: [start label] 7em [input] 1fr [end];}

form#form3 ul {display: grid;
	grid-template-columns: [start label] max-content [input] 1fr [end];}
form#form3 ul li {display: grid; grid: subgrid; grid-column: start / end;}

</style>
</head>
<body>

<p>Markup based on <a href="http://fantasai.inkedblade.net/style/discuss/subgrid-markup/">original work by Fantasai</a>.</p>

<form>
  <ul>
    <li><label for=name>Name:</label> <input id=name name=name>
    <li><label for=email>Email:</label> <input id=email name=email type=email>
    <li><label for=tel>Telephone:</label> <input id=tel name=tel type=tel>
    <li><label for=url>Homepage:</label> <input id=url name=url type=url>
    <li><label for=bday>Birthday:</label> <input id=bday name=bday type=date>
  </ul>
</form>

<form id="form1">
  <ul>
    <li><label for=name1>Name:</label> <input id=name1 name=name1>
    <li><label for=email1>Email:</label> <input id=email1 name=email1 type=email>
    <li><label for=tel1>Telephone:</label> <input id=tel1 name=tel1 type=tel>
    <li><label for=url1>Homepage:</label> <input id=url1 name=url1 type=url>
    <li><label for=bday1>Birthday:</label> <input id=bday1 name=bday1 type=date>
  </ul>
</form>


<form id="form2">
  <ul>
    <li><label for=name2>Name:</label> <input id=name2 name=name2>
    <li><label for=email2>Email:</label> <input id=email2 name=email2 type=email>
    <li><label for=tel2>Telephone:</label> <input id=tel2 name=tel2 type=tel>
    <li><label for=url2>Homepage:</label> <input id=url2 name=url2 type=url>
    <li><label for=bday2>Birthday:</label> <input id=bday2 name=bday2 type=date>
  </ul>
</form>


<form id="form3">
  <ul>
    <li><label for=name3>Name:</label> <input id=name3 name=name3>
    <li><label for=email3>Email:</label> <input id=email3 name=email3 type=email>
    <li><label for=tel3>Telephone:</label> <input id=tel3 name=tel3 type=tel>
    <li><label for=url3>Homepage:</label> <input id=url3 name=url3 type=url>
    <li><label for=bday3>Birthday:</label> <input id=bday3 name=bday3 type=date>
  </ul>
</form>


</body>
</html>