Отступы между пунктами многоколоночного меню

Question

Есть страница

Расстояние между подкатегорией 1-го уровня (к примеры Смартфоны) и категорией Смартфоны и гаджеты 25px, а расстояние между подкатегорией 2-го уровня и подкатегорией 1-го уровня (например, между Сотовые телефоны и Смартфоны с хорошей камерой) 52px, а расстояние внутри подкатегорий 1-го уровня 12px.

Подскажите как добиться разбиения на три колонки, так чтобы расстояние между заголовком (Смартфоны и гаджеты) и первой строкой (Смартфоны, Аксессуары для планшетов, Электронные книги и аксессуары) было 25px, а остальное форматирование было как на скриншоте (а точнее меня интересует Категория (Смартфоны и гаджеты), список подкатегорий 1-ого уровня (Смартфоны, Сотовые телефоны, Планшеты, Аксессуары для планшетов и т.д.) и списки подкатегорий 2-го уровня). Мне необходимо сделать многоколоночное меню как на скриншоте.

Проблема в том, что количество пунктов меню заранее неизвестно (возможно они будут храниться в базе).

Как я вижу это: для списков <ul></ul> будут передаваться данные с количеством подпунктов, затем будет производиться проверка высоты столбцов и в случае перехода на другой столбец - будет производиться нужный отступ для определенного пункта меню. Но как реализовать это не знаю.

Answer 1

Решение весьма простое если отвечать на:

Мне необходимо сделать многоколоночное меню как на скриншоте.

h1 {
  margin: 0 0 25px 0;
}
.menu {
  column-count: 3;
  column-gap: 20px;
}
.menu .menu__item {
  padding: 0 20px 40px 0;
  max-width: 260px;
  break-inside: avoid;
}
.menu .menu__item h2 {
  font-size: 14px;
  margin: 0 0 12px 0;
}
.menu .menu__item ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.menu .menu__item ul li {
  font-size: 14px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Смартфоны и гаджеты</title>
</head>
<body>
  <h1>Смартфоны и гаджеты</h1>
  <div class="menu">
    <div class="menu__item">
      <h2>Заголовок</h2>
      <ul>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
      </ul>
    </div>
    <div class="menu__item">
      <h2>Заголовок</h2>
      <ul>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
      </ul>
    </div>
    <div class="menu__item">
      <h2>Заголовок</h2>
      <ul>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
      </ul>
    </div>
    <div class="menu__item">
      <h2>Заголовок</h2>
      <ul>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
      </ul>
    </div>
    <div class="menu__item">
      <h2>Заголовок</h2>
      <ul>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
      </ul>
    </div>
    <div class="menu__item">
      <h2>Заголовок</h2>
      <ul>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
      </ul>
    </div>
    <div class="menu__item">
      <h2>Заголовок</h2>
      <ul>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
        <li>Смартфон</li>
      </ul>
    </div>
  </div>
</body>
</html>

С отсылкой на предыдущий вопрос, уже писал Вам там, что следует познакомиться с базой CSS, но учитывая Ваши задачи помимо базы изучите Grid и Flex. И ОБЯЗАТЕЛЬНО познакомьтесь пожалуйста с режимом разработчика в браузерах. Всё, что Вам нужно можно просто "украсть" у Ситилинка.

БЛОГ НА HUSL

Отступы между пунктами многоколоночного меню

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