Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как правильно сделать следующую верстку? (https://javascript.ru/forum/xhtml-html-css/75769-kak-pravilno-sdelat-sleduyushhuyu-verstku.html)

s24344 05.11.2018 11:30

Как правильно сделать следующую верстку?
 
Вложений: 1
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>

У этих карточек были стили как у промежуточного ряда на макете.
А при добавлении, например, следующих трех, стили как у первого ряда на макете.
Очень буду признателен за помощь.

Malleys 05.11.2018 12:05

Если вы имеете в виду расположение карточек, чтобы при добавлений они чередовались то по 2, то по 3 в ряду, то можно так: codepen.io/Malleys/pen/jQExpe

s24344 05.11.2018 12:37

Большое Вам спасибо за помощь.


Часовой пояс GMT +3, время: 03:40.