Как сверстать такое меню

Question

<div class="menu">
  <div class="item">
    <a class="sub" href="#">Настойки</a>
    <ul>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      ...
    </ul>
  </div>
</div>

Выводятся блоки (.item) с группами товаров. количество как блоков так и товаров в них - произвольное. Ширина .menu - минимально возможная. в идеале, в зависимости от количества блоков - расширяется .menu до определенной шинины, и если не хватает места в ширину, то расширяется вниз.

пробовал гридами както так:

.menu{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

получается что блоки второго ряда выравниваются по одной линии начиная от самого высокого блока первого рядя..

Еще пробовал с помощью свойства columns: 4; Но с ним получается что блоки разбиваются на части, а такого быть не должно.

Как-то с помощью css возможно сверстать чтобы само подстраивалось как надо? или может быть какие-то JS плагины есть для этого?

Answer 1

Добавьте классу .item свойство break-inside: avoid.

.menu {
  columns: 4;
}

.item {
  border: 1px solid #555;
  break-inside: avoid;
}

<div class="menu">
  <div class="item">
    <a class="sub" href="#">Настойки</a>
    <ul>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
    </ul>
  </div>

  <div class="item">
    <a class="sub" href="#">Еще Настойки</a>
    <ul>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
    </ul>
  </div>

  <div class="item">
    <a class="sub" href="#">меню 1</a>
    <ul>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
    </ul>
  </div>

  <div class="item">
    <a class="sub" href="#">Беляши</a>
    <ul>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
    </ul>
  </div>

  <div class="item">
    <a class="sub" href="#">Еще что-то</a>
    <ul>
      <li><a href="#">Название товара</a></li>
    </ul>
  </div>

  <div class="item">
    <a class="sub" href="#">Бегемотики</a>
    <ul>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
    </ul>
  </div>

  <div class="item">
    <a class="sub" href="#">Чебуреки</a>
    <ul>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
      <li><a href="#">Название товара</a></li>
    </ul>
  </div>
</div>

БЛОГ НА HUSL

Как сверстать такое меню

Ответы (1 шт):