subgridを使ったシンプルなフォーム
subgridについて
subgridは、2019年12月11日現在Firefox 71のみに実装があります。
説明
シンプルなフォームでは、form要素の直下に、label要素とinput要素を並べていました。
なんらかの事情で、input要素をlabel要素で囲むような場合はCSS Gridで列を揃えるのは難しくなります。ですが、subgridを使うことで実現できます。
この例ではsubgridをサポートしてない場合は、label要素をdisplay: contents;にして、同じ見た目にしています。ただ、できることならばdisplay: contentsではなくsubgridを使いたいお気持ちです。
HTML
<form>
<label>
<span>名前</span>
<input id="form-name" name="name" autocomplete="name" type="text">
</label>
<label>
<span>メールアドレス</span>
<input id="form-email" name="email" autocomplete="email" type="email">
</label>
<label>
<span>URL</span>
<input id="form-url" name="url" autocomplete="url" type="url">
</label>
<button type="submit">送信</button>
</form>CSS
form {
display: grid;
gap: 10px;
grid-template-columns: minmax(min-content, 150px) 1fr;
}
form > label {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}
form > button[type="submit"] {
grid-column: 1 / -1;
}
@supports not (grid-template-columns: subgrid) {
form > label {
display: contents;
}
}