Как выровнять grid-блок по ширине размера окна?

100

26 марта 2021, 11:20

У меня есть 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>

Answer 1

Есть такая конструкция в grid: auto-fit + minmax(). Она позволяет создавать отзывчивую раскладку без медиа-запросов:

.block__products-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    grid-gap: 20px; 
} 
.grid-element { 
    height: 300px; 
    background-color: #F7F0DD; 
    cursor: pointer; 
    transition: .9s; 
} 
.grid-element-one:hover { 
    background-color: #ffec41; 
} 
.grid-element-two:hover { 
    background-color: #FF2929; 
} 
.grid-element-three:hover { 
    background-color: #4f75f4; 
} 
.grid-element-four:hover { 
    background-color: #49cc63; 
}

<div class="block__products-grid wrap"> 
    <div class="grid-element grid-element-one"></div> 
    <div class="grid-element grid-element-two"></div> 
    <div class="grid-element grid-element-three"></div> 
    <div class="grid-element grid-element-four"></div> 
    <div class="grid-element grid-element-one"></div> 
    <div class="grid-element grid-element-two"></div> 
    <div class="grid-element grid-element-three"></div> 
    <div class="grid-element grid-element-four"></div> 
</div>