.container {
box-sizing: border-box;
display: grid;
grid-template-columns: auto 240px;
grid-column-gap: 20px;
grid-row-gap: 20px;
max-width: 1280px;
margin: 50px auto 0;
padding: 0 20px
}
.sidebar {
background: red;
display: grid;
grid-row-gap: 20px;
grid-template-rows: 400px 735px 166px 400px 346px 400px;
grid-template-columns: 240px;
}
.layout {
box-sizing: border-box;
display: grid;
grid-template-rows: 400px 740px 1240px 700px 490px 490px 490px 250px;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
section {background: red}
.preview {
display: grid;
grid-template-columns: auto 240px;
grid-column-gap: 20px;
grid-row-gap: 20px;
background: red;
}
.test-block, .test-block-2 {
height: 100%;
}
@media only screen and (max-width: 700px) {
.preview,.container {grid-template-columns: auto;}
}
Тогда уж фор не до 99 делайте, а пропишите переменную: