CODEWITHSUNDEEP
htmlcsscss-multicolumn-layout
IvanS95
IvanS95

Reputation: 5742

How to vertically align CSS columns content?

I'm trying to build a simple layout with an unordered list, using CSS columns so I can organize its content in two columns if there are too many items in the list, so far I'm able to get this to work like this:

.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>

However, I'm trying to make it so that the list is vertically aligned at the center of the container when there are just a few items, so it looks like this:

.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>

Since the contents of the list will fill up dynamically,I want them to stay aligned at the center of the container, is this possible to achieve with this markup and css columns? If not, what would be a good way to get this layout to work?

Upvotes: 1

Views: 1070

Answers (3)

IvanS95
IvanS95

Reputation: 5742

This is an alternate solution using only CSS Columns in the unordered list element, in this case the items in the columns align at the top, but the list itself stays vertically centered while more items are added.

* {
  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>

Upvotes: 0

Elias Faraone
Elias Faraone

Reputation: 286

The following css should do what you asked for:

    .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;
    }

Make sure to apply the content class to the ul element. Here is a stackblitz example

Upvotes: 1

Stanley
Stanley

Reputation: 2804

change flex direction and add flex to blue container

enter image description here

.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>

Upvotes: 1

Related Questions