Grid Layoutの作り方
Grid Layoutはレイアウトを囲むコンテナの要素（例では.container）にその子要素の配置の仕方を指定していきます。Flexboxと違い、要素を並べる行・列コンテナとなる要素を用意する必要はありません。
親要素に以下を指定
要素に display: grid を指定すると、その要素はグリッドコンテナになります。
display: grid
グリッドコンテナを縦・横に分割します。
縦方向に分割した各列のサイズは
/* 1列目から順番に180px、1fr、160pxの幅 */
grid-template-columns: 180px 1fr 160px;
横方向に分割した各行のサイズは
/* 1行目から順番に60px 1fr 90pxの高さ */
grid-template-rows: 60px 1fr 90px;
補足ですが
「fr」 という単位はなんだろう
メインエリアの幅指定に「fr」という単位を使います。
frはグリッドコンテナの中を分割するサイズの指定に使える単位です。全体の幅からfr以外の単位(pxや%など)で指定したものを引き、残りの幅がfrで指定された列に配分されます。
列・行のことを何ていう？
グリッドトラックといいます。
列・行を分割した線を何ていう？
グリッドラインといいます。
グリッドアイテムって？
グリッドコンテナ直下の子要素をグリッドアイテムといいます。