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

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

grid-template-columns

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

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

grid-template-rows

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

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

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

fraction

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

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

-広告-

Anker PowerExpand Direct 7-in-2 USB-C PD メディア ハブ 4K対応 HDMIポート 100W出力 Power Delivery 対応 Thunderbolt 3 USB-Cポート USB-A ポート microSD & SDカード スロット搭載 価格：5999円（税込、送料無料) (2020/10/2時点) 楽天で購入

PD 充電器 RAVPower Type C 急速充電器 90W【GaN (窒化ガリウム)採用/2ポート/折畳式/PD対応/PSE認証済】iPhone 11/11 Pro/11 Pro Ma 価格：7329円（税込、送料無料) (2020/10/2時点) 楽天で購入