Почему этот ul больше, чем содержимое внутри?

Question

У меня есть div (белая часть на изображении) с ul (зеленая часть) внутри и некоторые li (черная часть) внутри ul, организованные с помощью float, проблема в том, что я хочу, чтобы ul имел ширину его содержимое, но вместо этого он добавляет некоторое пустое пространство справа и получает ширину контейнера, почему это происходит и как я могу это исправить?

Пример того, что происходит:

Применяется CSS в основном:

.div {
    display:block
}

.ul {
    display: block;
    padding: 0;
    list-style: none;
}

li {
    float: left;
    margin-right: 10px;
}

div::after,
ul::after {
    content: "";
    display: block;
    clear: both;
}

Answer 1

Используйте комбинацию с плавающей точкой и сеткой для определения ширины.

ul {
  float: left;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  list-style: none;
  background-color: green;
}

li {
  float: left;
  margin-right: 10px;
  height: 140px;
  width: 140px;
  background: black;
}

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Подробнее о CSS Grid