У меня есть 8 элементов расположеных в два ряда по горизонтали. Для позиционирования, я использовал CSS Grid Layout. Далее после верстки основной станицы, я начал её адаптировать, но появился горизонтальный скролл, блоки остались такой же шириной что и были.
Как мне сделать так, чтобы блоки выравнивались, растягивались по ширине экрана при любом разрешении?
HTML-код блока
.grid-element-one {
width: 300px;
height: 300px;
background-color: #F7F0DD;
cursor: pointer;
}
.grid-element-two {
width: 300px;
height: 300px;
background-color: #F7F0DD;
cursor: pointer;
}
.grid-element-three {
width: 300px;
height: 300px;
background-color: #F7F0DD;
cursor: pointer;
}
.grid-element-four {
width: 300px;
height: 300px;
background-color: #F7F0DD;
cursor: pointer;
}
.grid-element-one:hover {
background-color: #ffec41;
transition: 900ms;
}
.grid-element-two:hover {
background-color: #FF2929;
transition: 900ms;
}
.grid-element-three:hover {
background-color: #4f75f4;
transition: 900ms;
}
.grid-element-four:hover {
background-color: #49cc63;
transition: 900ms;
}
.block__products-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: "a b c d"
"f g e h";
grid-gap: 20px;
}
HTML-код блока
<div class="block__products-grid wrap">
<div class="grid-element-one"></div>
<div class="grid-element-two"></div>
<div class="grid-element-three"></div>
<div class="grid-element-four"></div>
<div class="grid-element-one"></div>
<div class="grid-element-two"></div>
<div class="grid-element-three"></div>
<div class="grid-element-four"></div>
</div>