css gridで3列のレイアウトをつくる

こんにちは、ちゃるです😀
今日はCSS Gridについて調べました。

CSS Gridを使用して3列のレイアウトを作成するには、まずHTMLの <div> 要素を使甋して、グリッド コンテナーとしてマークアップします。

そして、 display: grid を使甋して、その要素をグリッド コンテナーに設定します。

次に、 grid-template-columns プロパティを使甋して、列の数とサイズを定義します。ここでは、3つの列を作成し、それぞれの幅を指定します。例えば、次のように指定することができます。

grid-template-columns: 100px 200px 100px;

これにより、3つの列が作成され、それぞれの幅が100px、200px、100pxとなります。
そして、各列に配置する要素を、 grid-column プロパティを使用して指定します。例えば、最初の列に配置する要素には次のように指定します。

grid-column: 1;

これにより、最初の列に要素が配置されます。同様に、2番目の列に配置する場合は、次のように指定します。

grid-column: 2;

グリッドの幅をpxで指定しましたが、frという単位を使用することもできます。

CSS Gridで使用する fr という単位は、「フラクション（fraction）」（分数のこと）の略称です。この単位は、グリッド コンテナーの全体の幅や高さを、均等に分割して配置するときに使用します。
例えば、 grid-template-columns プロパティに次のように指定することで、グリッド コンテナーを3列に均等に分割することができます。

grid-template-columns: 1fr 1fr 1fr;

このように指定することで、グリッド コンテナーの幅が3分の1ずつである3つの列が作成されます。また、 fr 単位は、他の単位（例えば px や %）と混在させて使用することもできます。例えば、次のように指定することで、幅が異なる3つの列を作成することができます。

grid-template-columns: 100px 1fr 200px;

今日はCSS Gridについて勉強しました！

サポートをいただいたらスクールに通ったり参考書を買ったりしたいと思います。支援をお待ちしています😀