<form>
<ul>
<li><label for=name>Name:</label>
<input id=name name=name>
</li>
<li><label for=email>Email:</label>
<input id=email name=email type=email>
</li>
<li><label for=tel>Telephone:</label>
<input id=tel name=tel type=tel>
</li>
<li><label for=url>Homepage:</label>
<input id=url name=url type=url>
</li>
<li><label for=bday>Birthday:</label>
<input id=bday name=bday type=date>
</li>
</ul>
</form>
form ul {
display: grid;
grid-template-columns: min-content 1fr;
gap: 1rem;
}
@supports (grid-template-columns: subgrid) {
form ul li {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
}
}
@supports not (grid-template-columns: subgrid) {
form ul li {
display: contents;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.