知って便利に！CSSグリッドを使ってフォームデザインを簡単にする方法

CSSグリッドとは何か？

*CSSグリッド（CSS Grid Layout Module）*は、CSSを使ってHTML要素を簡単に2次元レイアウトで操作できる、CSSの新しい機能です。格子状のマス目の形状をしたグリッドに、好きな順番に配置したり結合したりすることができます。

フォームのパーツは複雑ですが、CSSグリッドを使えば比較的思いどおりにレイアウトを行うことができます。レイアウトは全てCSS側で行うので、HTML側ではセマンティックに配置することができるのもメリットです。

言い換えれば、CSSグリッドを使うことで、HTMLの配置を変えずにCSS側だけでレイアウト操作をすることが可能になります。そのため、メンテナンスを行ってレイアウトを変更したくなった場合にも、HTMLとCSSの両方に手を加えるのではなく、CSS側だけを修正すればいいので、メンテナンスコストも大きく減るのです。
　　

CSSグリッドをフォームに実装する

最も基本的なレイアウトについて、具体例を使って確認をしてみましょう。

例えば、以下のように左に項目、右にアイテムを配置するようなフォームを作りたいと考えます。

まず、formタグ全体にグリッドを適用します。

form {
　　display: grid;
　　grid-template-columns: 200px 1fr;
}

ここでgrid-template-columnsはカラム数と幅を決めますが、最初の200pxは左カラムの幅を200pxと指定して、1frは残り全ての幅を右に当てるという意味で使っています。

続いて、grid-columnを使って縦のラインの配置を作っていきますが、原則としてラベルは左、テキストボックスとボタンは右に配置したいので、grid-columnの指定は以下のようになります。

label {
　　grid-column: 1 / 2;
}

input, button {
　　grid-column: 2 / 3;
}

これは、下記の図に照らし合わせながら確認するとよいでしょう。

ラベルは「1番目の線」と「2番目の線」の間に配置し、テキストボックスとボタンは「2番目の線」と「3番目の線」の間に配置する、という命令を、上のCSSで行っているということです。

列に関しては、何も指定しなければ上の要素から順に適用されていくので、ここでは特に指定しなくてもよいでしょう。順番を変える場合のみ、grid-rowプロパティを指定します。

最後に、項目と部品の間を空けるためにformタグにgrid-gapを指定すれば完成です。もちろん、Media Queryを使用すれば、スマートフォンなど特定のブレイクポイントを超えて幅が狭まった場合には1カラム表示をすることもできます。