Как сделать так, чтобы имя было под id?

Question

[frontAng]

без правок разметки
https://jsbin.com/cofenerezi/1/edit?html,css,output

Comments

[Антон Антон]

Кажется, нужно смотреть в сторону subgrid, но проще поменять разметку, конечно.

[Ankhena]

subgrid или js

[Алексей Уколов]

чтобы имя было под id

А сейчас оно где?

Answer 1

[Антон]

.product__wrapper {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  grid-template-rows: auto auto;
  align-items: flex-start;
}

.product__wrapper:before {
  content: '';
  grid-row: 1;
  grid-column: 1 / -1;
}

.product__wrapper .image {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.product__wrapper .article {
  grid-column: 2 / span 1;
  grid-row: 1;
  flex-direction: row;
  align-items: center;
}

.product__wrapper .naming  {
  grid-column: 2 / span 2;
  grid-row: 2;
}

.product__wrapper .naming  .label,
.product__wrapper .price  .label,
.product__wrapper .quantity  .label {
  display: none;
}

.product__wrapper .price {
  grid-column: 4 / span 2;
  grid-row: 1;
}

.product__wrapper .cashback {
  grid-column: 4 / span 2;
  grid-row: 2;
}

.product__wrapper .availability {
  grid-column: 2 / span 2;
  grid-row: 3;
}

.product__wrapper .quantity {
  grid-column: 1; 
  grid-row: 4;
}

.product__wrapper .links-product {
  grid-column: 4 / span 2;
  grid-row: 4;
}

.product__wrapper .availability {
  display: block;
}

.product__wrapper .image {
  width: 126px;
  height: 100%;
}