CSS Grid

I don’t really do frontend work any more, so I never got around to actually using it until now. It’s amazing though-

<form>
<label name="title">Title:</label> <input name="title"></input>
<label name="question">Question:</label> <input name="question"></input>
<label name="answer">Answer:</label> <input name="answer"></input>
</form>
form {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-gap: 10px;
    padding: 10px;
    background-color: #eee
}

form label {
    grid-column: 1; /* put the labels on the left */
    text-align: right;
}

form input {
    grid-column: 2; /* put the inputs on the right */
}

And bam, a totally passable form:

That would have been… either a ton of extra markup to put it inside a table, or a fiddly float hellscape ten years ago.

The web is nice, I’ve missed it in my long night of operations plumbing.