プログラミング独学者へauto-fillとauto-fitの作り方を解説

みなさん、こんにちは！
フリーランスエンジニアのKATSUMIです。
本日は、minmax()と「repeat関数」を説明します。
この２つの関数を使うとグリッドレイアウトの構築が楽になるだけでなく、CSS Gridだけでメディアクエリなしでもレスポンシブなレイアウトが実現できます。
repeat()で使えるauto-fillとauto-fitという値についても説明します。

auto-fillとauto-fitの違いは実装例を見るのが一番わかりやすいので、下の動画をご参照ください。

・auto-fillでは、親要素にスペースが余る場合、空のグリッドが作られます
・auto-fitでは、親要素にスペースが余る場合、グリッド・アイテムの幅が変わってスペースが埋められます

ホームページ作成やフリーランスエンジニアを育成するメンター業を右記で請けおってます

HTMLとCSS

See the Pen Untitled by kacyan (@kacyan) on CodePen.

「grid-template-columns: 1fr 1fr 1fr 1fr;」とした場合、コンテナの横方向を4で割った幅が1frとなります。

.grid-auto-fillがauto-fill、.grid-auto-fitがauto-fitのグリッド・コンテナ（親要素）になります。
グリッド・コンテナにはminmax()で指定した最小幅が100px、最大幅が1fr（フラクション）を指定した4つのグリッド・アイテムを入れています。

値を繰り返すrepeat関数

「grid-template-rows: 46vw 46vw 46vw 46vw 46vw;」のように何度も同じ値を指定するのは面倒です。
そこで同じ値を繰り返し指定するときは「repeat関数」を使うとスッキリまとめられます。書き方は「repeat(繰り返す数,値)」です。
例えば「grid-template-rows:repeat(5,46vw);」を指定すると、「46vw」を5回繰り返すという意味になります。

CSS

.grid {
width: 94vw;
margin: 0 auto 3vw;
display: grid;
gap: 2vw;
grid-template-columns: repeat(2,46vw);
grid-template-rows : repeat(5,46vw);
}
　　　　　↓
「grid-template-columns」と「grid-template-rows」の値をrepeat関数でまとめた
指定した内容は同じだが、短く読みやすいコードになった。

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

created by Rinker

auto-fill、auto-fitの仕様

auto-fillの仕様

繰り返しの数値にauto-fillを指定すると、グリッド・コンテナの幅が当該の軸に向かって定数サイズか最大サイズの場合、繰り返し回数はグリッドがコンテナからはみ出ない最大の回数になる（それぞれのトラックを、それが定数の場合は最大サイズの機能として、それ以外の場合は最小サイズの機能として扱う。その際、ギャップも勘案する）。どの数値でもコンテナをはみ出てしまう場合は繰り返しは1回になる。また、グリッド・コンテナの幅が当該の軸に向かって定数の最小サイズの場合、繰り返しの回数は最低要件を満たす最小の整数になる。そうでなければ指定のトラック・リストは1回のみ繰り返す。

auto-fitの仕様

auto-fitもauto-fillと同じように振る舞います。ただし、グリッド・アイテムが置かれた後、繰り返された空のトラックは崩されます。空のトラックはインフローのグリッド・アイテムが置かれていない、または、スパンされていないトラックのことを指します。（すべてのトラックが空の場合、すべて崩されることもあります。）
崩されたトラックは0pxの固定のトラック・サイズの機能を持つものとして扱われ、アラインメントによって配分されたスペースを含む両サイドのガッターも崩れます。

今回の記事が、フロントエンドエンジニア、Webデザイナーを独学で目指している方の参考になれば幸いです。

下記を押していただけると励みになります！
↓

　　　　　　　　　　　　　　　　人気記事

プログラミングスクール：エンジニアおすすめの３社

フリーランス初心者にとってクラウドソーシングは登竜門だ！

プログラミング独学者へauto-fillとauto-fitの作り方を解説