Показать сообщение отдельно
  #1 (permalink)  
Старый 05.11.2018, 11:30
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Как правильно сделать следующую верстку?
https://codepen.io/s24344/pen/KrwoGv
Есть следующая структура html (важно сделать именно с этой структурой):
<ul class="cards__list">
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 1
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 2
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 4
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 5
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 6
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 7
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 8
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 9
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 10
      </div>
    </a>
  </li>
</ul>

У меня задача сделать так, чтобы при добавлении, например:
<li class="cards__item">
  <a class="cards__link" href="#">
    <div class="cards__link-wrapper">
      item 8
    </div>
  </a>
</li>
<li class="cards__item">
  <a class="cards__link" href="#">
    <div class="cards__link-wrapper">
      item 9
    </div>
  </a>
</li>
<li class="cards__item">
  <a class="cards__link" href="#">
    <div class="cards__link-wrapper">
      item 10
    </div>
  </a>
</li>

У этих карточек были стили как у промежуточного ряда на макете.
А при добавлении, например, следующих трех, стили как у первого ряда на макете.
Очень буду признателен за помощь.
Изображения:
Тип файла: jpg Screenshot_5.jpg (16.8 Кб, 6 просмотров)
Ответить с цитированием