グリッド練習

HTML

1. 親要素のdivにID「photo」を設定しました。
2. 子要素div個別のIDを設定し、左図に示したサイズの6枚の画像を挿入しました。

CSS

#photo {
　width: 100%;
　display: grid;
　grid-column-gap: 8px;
　grid-template-rows: 1fr 1fr 1fr 1fr;
　grid-template-columns: 1fr 1fr 1fr;
}

子要素のIDに左図のgrid-column及びgrid-rowを指定しました。