Как выровнять CSS столбцы по вертикали?

Question

Я пытаюсь создать простой макет с неупорядоченным списком, используя столбцы CSS, чтобы я мог организовать его содержимое в два столбца, если в списке слишком много элементов, поэтому я могу получить это работать так:

.slide {
  width: 874pt;
  height: 492pt;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #000;
  background-color: #FFF;
}

ul.product-list {
  position: absolute;
  height: 100%;
  left: 10%;
  list-style-type: none;
  padding: 0;
  margin: 0;
  -webkit-columns: 2;
  columns: 200px auto;
}

ul.product-list li.product-item {
  display: flex;
  align-items: center;
  break-inside: avoid;
}

ul.product-list li.product-item:not(:last-child) {
  margin-bottom: 10px;
}

ul.product-list li.product-item img {
  border-radius: 50%;
  margin-right: 10px;
  width: 74px;
  height: 74px;
}

<section class="slide">
  <div class="content">
    <ul class="product-list">
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
    </ul>
  </div>
</section>

Тем не менее, я пытаюсь сделать так, чтобы список был выровнен по вертикали в центре контейнера, когда есть только несколько элементов, поэтому выглядит так:

.slide {
  width: 874pt;
  height: 492pt;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #000;
  background-color: #FFF;
}

.content {
  display: flex;
  align-items: center;
  height: 100%;
}

ul.product-list {
  position: absolute;
  left: 10%;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.product-list li.product-item {
  display: flex;
  align-items: center;
  break-inside: avoid;
}

ul.product-list li.product-item:not(:last-child) {
  margin-bottom: 10px;
}

ul.product-list li.product-item img {
  border-radius: 50%;
  margin-right: 10px;
  width: 74px;
  height: 74px;
}

<section class="slide">
  <div class="content">
    <ul class="product-list">
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
    </ul>
  </div>
</section>

Поскольку содержимое списка будет заполняться динамически, я хочу, чтобы они оставались выровненными по центру контейнера, возможно ли этого добиться с помощью этой разметки и css столбцы? Если нет, то как можно было бы заставить этот макет работать?

Answer 1

Следующее css должно делать то, что вы просили:

    .slide {
      width: 874pt;
      height: 492pt;
      margin: auto;
      border: 1px solid #000;
      background-color: #FFF;
    }

    ul.product-list {
      list-style-type: none;
      display: flex;
      flex-flow: column;
      flex-wrap: wrap;
      align-items: center;
      height: 500px;
    }

    ul.product-list li.product-item {
      margin-bottom: 10px;
    }

    ul.product-list li.product-item img {
      border-radius: 50%;
      margin-right: 10px;
      width: 74px;
      height: 74px;
    }

Обязательно применять класс content к элементу ul . Вот пример stackblitz

Answer 2

изменить направление изгиба и добавить изгиб в синий контейнер

.slide {
    width: 100vw;
    height: 500px;
    margin: 0 auto;
    background-color: rgb(163, 163, 163);
  }
  
  
    
    ul.product-list li.product-item {
        display: flex;
        align-items: center;
        break-inside: avoid;
    }
    
    ul.product-list li.product-item:not(:last-child) {
        margin-bottom: 10px;
    }
    
    ul.product-list li.product-item img {
        border-radius: 50%;
        margin-right: 10px;
        width: 74px;
        height: 74px;
    }

ul.product-list {
    list-style-type: none;
    width: 80vw;
    border: 2px solid blue;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.content {
    display: flex;
    height: 100%;
    width: 90vw;
    border: 3px solid red;

    margin: 0 auto;
}

.product-item {

    border: 3px solid lime;
    padding: 1vh 1vw;
}

<section class="slide">
    <div class="content">
      <ul class="product-list">
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="slide">
    <div class="content">
      <ul class="product-list">
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>
        <li class="product-item">
          <img src="https://via.placeholder.com/60" alt="">
          <span>Item</span>
        </li>

Answer 3

Это альтернативное решение, использующее только CSS Столбцы в элементе неупорядоченного списка, в этом случае элементы в столбцах выравниваются вверху, но сам список остается по центру, пока больше элементов добавлено.

* {
  box-sizing: border-box;
}

.slide {
  width: 874pt;
  height: 492pt;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #000;
  background-color: #FFF;
}

.content {
  display: flex;
  align-items: center;
  height: 100%;
}

ul.product-list {
  position: absolute;
  min-height: fit-content;
  max-height: 100%;
  left: 10%;
  list-style-type: none;
  padding: 35px 0;
  margin: 0;
  -webkit-columns: 2;
  columns: 200px auto;
}

ul.product-list li.product-item {
  display: flex;
  align-items: center;
  break-inside: avoid;
}

ul.product-list li.product-item:not(:last-child) {
  margin-bottom: 10px;
}

ul.product-list li.product-item img {
  border-radius: 50%;
  margin-right: 10px;
  width: 74px;
  height: 74px;
}

<section class="slide">
  <div class="content">
    <ul class="product-list">
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
    </ul>
  </div>
</section>

<section class="slide">
  <div class="content">
    <ul class="product-list">
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
      <li class="product-item">
        <img src="https://via.placeholder.com/60" alt="">
        <span>Item</span>
      </li>
    </ul>
  </div>
</section>