Сетка товаров на Grid

106

28 мая 2021, 03:50

У меня есть сетка товаров сделанная на гридах. Количество товаров в ряду - 4, рядов может неопределенное количество. При нажатии на какой-либо товар, под рядом, в котором находится товар, на всю ширину сетки должна появится его полная карточка, как бы добавить еще один ряд.

Как я вижу реализацию: считаю на какую по счету карточку нажали, после следующей карточки, счет которой кратный четырем, добавляю большую карточку. Но, так как в стилях прописано grid-template-columns: repeat(4, 190px); , то большая карта занимает только эти 190рх, а нужно, чтобы была на всю ширину сетки. Каким образом такое можно реализовать?

Пример кода:

.grid { 
  display: grid; 
  grid-template-columns: repeat(4, 190px); 
  justify-content: space-between; 
  grid-row-gap: 5px; 
  grid-column-gap: 5px; 
} 
 
.item { 
  height: 200px; 
  background-color: #eee; 
} 
 
.card { 
  background-color: #ccc; 
  width: 700px; 
}

<div class="grid"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="card"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>

Answer 1

Все нормально у вас, осталось довести до логического завершения:

.grid { 
  display: grid; 
  grid-template-columns: repeat(4, 190px); 
  justify-content: space-between; 
  grid-row-gap: 5px; 
  grid-column-gap: 5px; 
} 
 
.item { 
  height: 200px; 
  background-color: #eee; 
} 
 
.card { 
  background-color: #ccc; 
  grid-column-start: 1; 
  grid-column-end: span 4; 
  height: 200px; 
}

<div class="grid"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="card"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>

А вот так можно попробовать обойтись без подсчета каждой четвертой карты:

.grid { 
  display: grid; 
  grid-template-columns: repeat(4, 190px); 
  justify-content: space-between; 
  grid-row-gap: 5px; 
  grid-column-gap: 5px; 
  position: relative; 
} 
 
.item { 
  height: 200px; 
  background-color: #eee; 
} 
 
.selected { 
  margin-bottom: 205px; 
  background-color: pink; 
} 
 
.card { 
  background-color: gold; 
  position: absolute; 
  width: 100%; 
  height: 200px; 
  left: 0; 
  margin-top: 205px; 
  grid-column-start: 1; 
  grid-column-end: span 4; 
}

<div class="grid"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item selected"> 
    <div class="card"></div> 
  </div> 
  <div class="item"></div> 
 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>