Колонки в Taplink

Данный код ставит в горизонтальный ряд всё содержимое секции

Пример работы: https://tap.one-way.dev/p/89a5d0/

Видеоинструкция:https://youtu.be/6EgMDEHKv7o

Создайте секции, в которых нужно выстроить в ряд блоки
Вставьте внутрь секции последним блоком код

<div class="oneway-gridmaker">
  
</div>

В конец таплинка вставьте

<script>
Array.from(document.querySelectorAll(".oneway-gridmaker")).map((o) => {
  let e = o.closest(".blocks-section");
  let columns = e.querySelectorAll(".block-item").length-1;
  e.querySelector(".block-item").parentElement.style.setProperty("grid-template-columns",`repeat(${columns},1fr)`);
  e.querySelector(".block-item").parentElement.classList.add("grid");
  })
</script>
<style>
.grid {display:grid;gap:10px;}
  .grid .part-html:nth-last-child{display:none;}

</style>

Если вам необходимо на ПК иметь колонки, а на телефоне выстраивать их в ряд по вертикали, добавьте внутрь <style></style> еще такой код:

@media (max-width:820px) {
.grid {grid-template-columns:1fr!important;}
}

Если первый объект выше другого, добавьте фикс

<style>
.has-s .block-item:first-child {
    padding-top: .5rem;
}
</style>

Колонки из секций

Принцип работы такой же. Чтобы "заколонить" секции, вставьте внутрь секции последним блоком код

<div class="section-gridmaker" style="display:none;">
  2
</div>

Цифра 2 в этом коде отвечает за число секций, которые будут объединены. То есть цифра 2 означает, что секция, внутри которой есть этот код и одна следующая секция будут иметь 50% ширины и располагаться горизонтально. Если поменять цифру на 3, то будет объединено 3 секции с 33% ширины.

Теперь берем код для колонок внутри секций

<script>
Array.from(document.querySelectorAll(".oneway-gridmaker")).map((o) => {
  let e = o.closest(".blocks-section");
  let columns = e.querySelectorAll(".block-item").length-1;
  e.querySelector(".block-item").parentElement.style.setProperty("grid-template-columns",`repeat(${columns},1fr)`);
  e.querySelector(".block-item").parentElement.classList.add("grid");
  })
</script>
<style>
.grid {display:grid;gap:10px;}
  .grid .part-html:nth-last-child{display:none;}

Вместо него делаем новую версию кода, которая позволяет делать колонки и внутри секций, и из самих секций

<script>
  Array.from(document.querySelectorAll(".section-gridmaker")).map((o) => {
  let e = o.closest(".blocks-section");
  let columns = o.textContent*1
  let $parent = document.createElement('div');
  $parent.classList.add('section-grid');
  $parent.style.setProperty("grid-template-columns",`repeat(${columns},1fr)`);
  e.parentNode.insertBefore($parent, e);
  $parent.appendChild(e);
  for (let i=0;i<columns-1;i++) {
  $parent.appendChild($parent.nextElementSibling) 
  }
  })
  
Array.from(document.querySelectorAll(".oneway-gridmaker")).map((o) => {
  let e = o.closest(".blocks-section");
  let columns = e.querySelectorAll(".block-item").length-1;
  e.querySelector(".block-item").parentElement.style.setProperty("grid-template-columns",`repeat(${columns},1fr)`);
  e.querySelector(".block-item").parentElement.classList.add("grid");
  })
  
</script>
<style>
.grid,.section-grid {display:grid;gap:10px;}
  .grid .part-html:nth-last-child,.section-grid .part-html:nth-last-child{display:none;}

</style>

Этот код вставляем в самый низ таплинка.

Что если я хочу сделать две секции в ряд, а у одной из секций еще и блоки сделать в две колонки?

Объедините тот короткий код, который вставляем внутрь секций. Например:

<div class="section-gridmaker" style="display:none;">
  2
</div><div class="oneway-gridmaker">
  
</div>

В этом случае секция будет иметь 2 колонки, а также сама будет являться колонкой-секцией

А как убрать колонки-секции на телефонах?

<style>@media (max-width:820px) {
.section-grid {grid-template-columns:1fr!important;}</style>