.parent{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:8px}.div1{grid-column:span 2/span 2}.div2{grid-column-start:3}.div3{grid-column-start:4}.div4,.div5,.div6,.div7{grid-row-start:2}@media (max-width:640px){.parent{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr)}.div1{grid-column:1/span 2}.div2{grid-column:1/span 1}.div2,.div3{grid-row:2/span 1}.div3{grid-column:2/span 1}.div4{grid-column:1/span 1}.div4,.div5{grid-row:3/span 1}.div5{grid-column:2/span 1}.div6{grid-column:1/span 1}.div6,.div7{grid-row:4/span 1}.div7{grid-column:2/span 1}}