Почему column-gap не отрабатывает?

Question

[frontAng]

html

<ul class="contacts__list">
  <li><a href="#" class="contacts__box">Главная</a></li>
  <li><a href="#" class="contacts__box">Услуги</a></li>
  <li><a href="#" class="contacts__box">Документы</a></li>
  <li><a href="#" class="contacts__box">test 4</a></li>
  <li><a href="#" class="contacts__box">test 5</a></li>
  <li><a href="#" class="contacts__box">test 6</a></li>
</ul>

css

ul {
  column-count: 2;
  column-gap: 40px;
}

Answer 1

[Ankhena]

Честно признаться, я не знаю, почему он не отрабатывает у вас. У меня он прекрасно работает.
Поэтому всегда делайте песочницу с демонстрацией проблемы. (Удобно когда есть и код в вопросе и песочница).

https://codepen.io/AnnaSummer/pen/qBMpPjN

Comments

[frontAng]

Ankhena, так расстояие между li не такое. У li другая ширина. Не под контент. Поняли о чем я?

[Ankhena]

frontAng,

так расстояие между li не такое

Какое не такое? Попросили 40, там 40 и стоит. Специально цветом раскрасила для наглядности.

У li другая ширина

какая другая? В вопросе ни слова нет про ширину.
Колонки всегда равной ширины.

[Ankhena]

frontAng, можно регулировать ширину списка, например, fit-content, min-content и т.д.

[frontAng]

Ankhena,

Колонки всегда равной ширины.

в этом и суть. Можно сделать , чтобы они были под ширину li?

[Ankhena]

frontAng, этим инструментом, нет, нельзя. Вы видели когда-нибудь в газетах колонки разной ширины? Нет. А это газетная раскладка.

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

[frontAng]

Ankhena, ок, а как можно? Каким инструментом?

[Ankhena]

frontAng, в таком направлении, по столбцам, с js.