grid はその名の通り、要素をグリッド状に並べるためのプロパティです。これが非常に便利で、主要なレイアウトは grid を使えばたいてい実現できてしまいます。

仕様が複雑なのが難点ですが、頭に入れておくプロパティは2つだけです。

grid-template-columns: 1fr 200px;
grid-gap: 20px;

簡単ですね。可変レイアウトの場合は以下のように書きます。

grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(3, minmax(100px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

minmax は長さを返す関数です。1fr の最小値を設定します。

repeat は要素を繰り返します。繰返し数に auto-fill または auto-fit を指定することで可変レイアウトにできます。

この違いは難しいのですが、グリッドに要素があるときに、auto-fitは要素を引き伸ばそうとし、auto-fillは次の要素(または隙間)を挿入します。グリッドらしい挙動をするのは auto-fill だと思います。

全容は MDN を読んでください。auto, fit-content, min/max-content, mansory, subgrid などのプロパティがあります。grid-template-areas も面白そうですが、今のところ使わなさそうなのでおいておきます。