CSS

グリッドを設定してみよう

グリッドの列や行を設定したあとに、余白を要素の幅に割り当てるためのfrという単位についても見ていきます。

  • grid-template-columns
  • grid-template-rows
  • fraction

grid-template-columns

・gridの設定をしていきたいと思います。まず親要素に対してdisplay: grid;としてあげます。

 

・更に親要素に対してgrid-template-columns(グリットテンプレートカラマス)で列の幅を列挙します。例えば2列作りたいので 100px 100px; と記入します。

grid-template-rows

・親要素に対してgrid-template-rows(グリットテンプレートロー)で行の高さを列挙します。3行作りたいので 100px 100px 100px ;と記入します。

・デフォルトだと要素は左上から順番に並べられます。

・また、設定を三列2行にしたい場合は、grid-template-columnsを2個、grid-template-rowsを2つにしてあげることによって好きな配列に組み直すことができます。

fraction

・両端の列を 100px 固定にして中央の列を可変幅にすることもできます。flexで使ったflex: 1;と同じような設定を指定していきましょう。

・その場合、 fraction という単位を使うことができて、たとえば真ん中を 1fr とすれば端の100px 100px を配置したあとの余白を真ん中に割り当てることができます。

-広告-

 

 






-CSS