Gridの基本
display:grid と grid-template-columns で、列の数と幅を決めます。
repeat(3, 1fr) は「1frの列を3つ」＝均等3列。frは残りスペースの分け方の単位です。
レスポンシブは auto-fill と minmax
カードを画面幅に応じて自動で折り返したいときは、
repeat(auto-fill, minmax(180px, 1fr)) のように書きます。
「最低180px、余裕があれば広げる」列を、入るだけ並べてくれます。
このツールの「自動折り返し」がこれを生成します。メディアクエリなしでレスポンシブになります。
FlexboxとGridの使い分け
1方向（横一列・縦一列）の並びはFlexbox、 行と列の2次元のレイアウトはGridが得意です。カードの格子はGridが向いています。
このツールについて
設定はすべてブラウザ内で処理され、サーバーに送信されることはありません。