Как убрать пустое пространство под блоком на grid сетке?

Question

Как убрать пустое пространство под блоком на grid сетке?

Рейтинг: -1Ответов: 1Опубликовано: 24.01.2023

Есть сетка из 2х колонок разной высоты и если высота сильно разнится, то у какой то из колонок под ней появляется пустое пространство. Как сделать так, чтобы пустота пропала и вместо нее под колонкой сразу начинался другой элемент сетки?

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}
.calculators {
  padding: 50px 0;
}
.calculators h2 {
  font-size: 32px;
  line-height: 34px;
  margin-bottom: 20px;
}

.container {
  max-width: 1720px;
  padding: 0 10px;
  margin: 0 auto;
}

.calculators__categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}

.calculators__title {
  display: inline-block;
   margin-bottom: 7px;
}

.calculators__count {
  font-size: 11px;
}

.calculators__sublist-title {
  padding-left: 20px;
  margin-bottom: 7px;

}
.calculators__sublist:not(:last-child) {
  margin-bottom: 10px;
}
.calculators__sublist .calculators__item  {
  padding-left: 40px;
}

.calculators__item {
  padding-left: 20px;

}

.calculators__item-link {
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>...</title>
</head>

<body>

  <div class="calculators">
    <div class="container calculators__container">
      <h2>Перевод единиц измерения</h2>
      <div class="calculators__categories">
        <ul class="calculators__list" id="calculators-electricity">
          <h3 class="calculators__title">Электричество <sub class="calculators__count">2</sub></h3>
          <li class="calculators__item">
            <a href="#" class="calculators__item-link">Измерение электрического тока</a>
          </li>
          <li class="calculators__item">
            <a href="#" class="calculators__item-link">Измерение индуктивности</a>
          </li>
        </ul>
        <ul class="calculators__list" id="calculators-physics">
          <h3 class="calculators__title">Физика <sub class="calculators__count">11</sub></h3>
          <ul class="calculators__sublist">
            <h4 class="calculators__sublist-title">Конвертеры <sub class="calculators__count">9</sub></h4>
            <li class="calculators__item">
              <a href="#" class="calculators__item-link">Перевод единиц силы</a>
            </li>
            <li class="calculators__item">
              <a href="#" class="calculators__item-link">Перевод единиц угловой скорости</a>
            </li>
            <li class="calculators__item">
              <a href="#" class="calculators__item-link">Перевод единиц плотности</a>
            </li>
            <li class="calculators__item">
              <a href="#" class="calculators__item-link">Перевод единиц угловой меры</a>
            </li>
            <li class="calculators__item">
              <a href="#" class="calculators__item-link">Перевод единиц ускорения</a>
            </li>
            <li class="calculators__item">
              <a href="#" class="calculators__item-link">Перевод единиц энергии и работы</a>
            </li>
            <li class="calculators__item">
              <a href="#" class="calculators__item-link">Перевод единиц освещённости</a>
            </li>
            <li class="calculators__item">
              <a href="#" class="calculators__item-link">Перевод единиц крутящего момента</a>
            </li>
            <li class="calculators__item">
              <a href="#" class="calculators__item-link">Конвертер калибра проводов</a>
            </li>
          </ul>
          <ul class="calculators__sublist">
            <h4 class="calculators__sublist-title">Калькуляторы <sub class="calculators__count">2</sub></h4>
            <li class="calculators__item">
              <a href="#" class="calculators__item-link">Преобразование энергии</a>
            </li>
            <li class="calculators__item">
              <a href="#" class="calculators__item-link">Калькулятор точки росы</a>
            </li>
          </ul>
        </ul>
        <ul class="calculators__list" id="calculators-radiation">
          <h3 class="calculators__title">Радиация <sub class="calculators__count">2</sub></h3>
          <li class="calculators__item">
            <a href="#" class="calculators__item-link">Перевод единиц измерения радиоактивности</a>
          </li>
          <li class="calculators__item">
            <a href="#" class="calculators__item-link">Измерение радиации</a>
          </li>
        </ul>
        <ul class="calculators__list" id="calculators-volume">
          <h3 class="calculators__title">Объем <sub class="calculators__count">3</sub></h3>
          <li class="calculators__item">
            <a href="#" class="calculators__item-link">Расчёт объёма газа в баллоне в зависимости от давления</a>
          </li>
          <li class="calculators__item">
            <a href="#" class="calculators__item-link">Расчет параметров трубопровода</a>
          </li>
          <li class="calculators__item">
            <a href="#" class="calculators__item-link">Определить объемный расход</a>
          </li>
        </ul>
        <ul class="calculators__list" id="calculators-pressure">
          <h3 class="calculators__title">Давление <sub class="calculators__count">3</sub></h3>
          <li class="calculators__item">
            <a href="#" class="calculators__item-link">Определить давление смеси</a>
          </li>
          <li class="calculators__item">
            <a href="#" class="calculators__item-link">Давление в шахте в зависимости от глубины погружения</a>
          </li>
          <li class="calculators__item">
            <a href="#" class="calculators__item-link">Калькулятор давления</a>
          </li>
        </ul>
        <ul class="calculators__list" id="calculators-other">
          <h3 class="calculators__title">Другие <sub class="calculators__count">5</sub></h3>
          <li class="calculators__item">
            <a href="#" class="calculators__item-link">Калькулятор веса и массы - рассчитать вес и массу</a>
          </li>
          <li class="calculators__item">
            <a href="#" class="calculators__item-link">Перевод единиц времени</a>
          </li>
          <li class="calculators__item">
            <a href="#" class="calculators__item-link">Конвертер единиц концентрации газов</a>
          </li>
          <li class="calculators__item">
            <a href="#" class="calculators__item-link">Перевод температуры онлайн калькулятор</a>
          </li>
          <li class="calculators__item">
            <a href="#" class="calculators__item-link">Определить длину звуковой волны и частоту</a>
          </li>
        </ul>
      </div>
    </div>
  </div>

</body>

</html>

css grid

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

колонке которая больше указать занимать 2/3/4 или сколько потребуется строк а которые меньше оставить по одной строке

Как убрать пустое пространство под блоком на grid сетке?

Ответы