Как подтягивать элементы сетки?

Question

[frayer]

у меня есть сетка и фильтрация контента, для нее я использовал плагин mixitup

после того как нажимаю кнопку фильтра, не нужны блоки исчезают, а нужны остаются, но на свои местах, я бы хотел, чтобы они подтягивались все в одну строку, как это можно реализовать?

я думаю ошибка в реализации самой сетки.

<div class="cards-grid container">
            <div class="mix about card-demo card-1">Hello1 </div>
            <div class="mix about card-demo card-2"> Hello2</div>
            <div class="mix projects card-demo about-1"> Hello3</div>
            <div class="mix about card-demo about-2"> Hello4</div>
    
            <div class="mix media card-demo card-3"> Hello5</div>
            <div class="mix about card-demo card-4"> Hello6</div>
            <div class="mix media card-demo about-3"> Hello7</div>
            <div class="mix projects card-demo about-4"> Hello8</div>
            <div class="mix media card-demo about-5"> Hello9</div>
            <div class="mix projects card-demo about-6"> Hello10</div>
        </div>

.cards-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, minmax(20por0px, 260px));
    grid-template-rows: repeat(4, 180px);
    grid-auto-rows: 380px;
    grid-template-areas: 
    "wide1 wide1 product1 product2"
    "wide2 wide3 product3 product2"
    "wide4 wide4 product3 product4"
    "wide5 wide5 product5 product5";
}
.card-1 {
    grid-area: wide1;
    background-color: rgb(59, 201, 15);
}
.card-2 {
    background-color: rgb(209, 125, 28);
    grid-area: product1;
}

Comments

[Ankhena]

Вы же привязали карточки к именованным областям.

И почитайте про grid-auto-flow и dense

[frayer]

Ankhena, да, и не понимаю как по-другому можно реализовать такую сетку

[Ankhena]

frayer, хоть песочницу сделайте на jsfiddle.net

реализовать такую сетку

С помощью классов
Например:

r-2 {
grid-row: span 2
}
с-2 {
grid-column: span 2
}

[frayer]

Ankhena, а если использовать grid-area, то тоже самое будет?

[Ankhena]

frayer, не поняла вопроса

[frayer]

Ankhena, вместо grid-template-areas, использовать grid-area, элементы также будут привязаны?

[Ankhena]

frayer, если для контейнера применить свойство отвечающее за расположение грид-элементов, просто слетит ваш грид.
Думаю, что на этом месте пора открыть справочник и посмотреть какие свойства применяются к грид-контейнерам, а какие к грид-элементам.

Answer 1

[Ankhena]

Раскомментируйте свойство grid-auto-flow