すべてのサンプルはレスポンシブデザイン対応なので横幅600px以下になると1カラムになるよう設定してあります。ブラウザサイズを変更してご確認ください。
可変幅の2カラムレイアウトです。親要素の横幅に合わせて2カラムとも可変します。
可変幅の2カラムレイアウトです。grid-item-1は300px固定で、親要素の横幅に合わせてgrid-item-2だけ可変します。
grid-item-1が200px、grid-item-3は300px固定でgrid-item-2が可変幅の3カラムレイアウトです。親要素の横幅に合わせてgrid-item-2だけ可変します。
また、orderプロパティでスマホサイトで表示された時のgrid-itemの表示順を変更してあります。
以上のサンプルをレイアウトの基本形として応用してみてください。