CSS Grid の subgrid でフォームをいい感じにする

仕様

• PC（幅の広い画面）で表示する場合には 入力欄とそのラベルを横並びに表示 、SP（スマートフォンなど幅の狭い画面）で表示する場合には ラベルを入力欄の上に表示 する。
• 入力欄とラベルを横並びにする際、 入力欄とラベルはそれぞれ左端の位置が揃うようにする 。

つくったもの

• definition-list-css-subgrid - StackBlitz

サブグリッドを使う

• サブグリッド - CSS: カスケーディングスタイルシート | MDN

• display: table もしくは table タグを使う。
• フォーム全体を 2 列のグリッドコンテナにする。

<form>
  <dl class="grid grid-cols-[auto_1fr]">
    <dt>お名前</dt>
    <dd>
      <input name="name" type="text" />
    </dd>

    <dt>ニックネーム</dt>
    <dd>
      <input name="nickname" type="text" />
    </dd>
  </dl>
</form>

<form>
  <dl class="grid grid-cols-[auto_1fr] gap-8">
    <div class="col-span-full grid grid-cols-[subgrid]">
      <dt>お名前</dt>
      <dd>
        <input name="name" type="text" />
      </dd>
    </div>

    <div class="col-span-full grid grid-cols-[subgrid]">
      <dt>ニックネーム</dt>
      <dd>
        <input name="nickname" type="text" />
      </dd>
    </div>
  </dl>
</form>

<form>
  <dl class="grid grid-cols-[auto_1fr] gap-8">
    <div class="col-span-full grid gap-y-2 md:grid-cols-[subgrid]">
      <dt>お名前</dt>
      <dd>
        <input name="name" type="text" />
      </dd>
    </div>

    <div class="col-span-full grid gap-y-2 md:grid-cols-[subgrid]">
      <dt>ニックネーム</dt>
      <dd>
        <input name="nickname" type="text" />
      </dd>
    </div>
  </dl>
</form>