List with dynamic size

Question

I need to make a list that in up to a maximum of 6 items, take the entire width of the screen, following the following steps:

1. If there is only one item in the list, it takes 100% width of the screen;
2. If you have two items in the list, each one has to take 50% of the total width of the screen;
3. If you have three items in the list, each one has to take 33% of the total width of the screen, and so on up to 6 items.

Follow the code of what I have done so far, I could not do and I need to do this only with CSS. I am using Bootstrap.

https://codepen.io/maur-cio-gabriel-kr-ger/pen/yQQxeN?editors=1100

Answer 1

I believe what you need is the auto layout Columns. Just don’t specify the size of the column and let Bootstrap himself take care of it. I think "under the covers" is used flex layout, because the behavior is very similar.

/* Somente para visualizar as colunas. */
.col:nth-child(1){ background: #34ace0 }
.col:nth-child(2){ background: #33d9b2 }
.col:nth-child(3){ background: #ffda79 }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class='container-fluid'>
  <div class='row'>
    <div class='col'>Item 1</div>
    <div class='col'>Item 2</div>
    <div class='col'>Item 3</div>
  </div>
</div>

<br>

<div class='container-fluid'>
  <div class='row'>
    <div class='col'>Item 1</div>
    <div class='col'>Item 2</div>
  </div>
</div>

<br>

<div class='container-fluid'>
  <div class='row'>
    <div class='col'>Item 1</div>
  </div>
</div>

Answer 2

You can use flexbox to divide the width of the screen equally between the list elements.

Just use display: flex; in <ul> and flex-grow in <li>.

Here has a good flexbox cheatsheet.

Example:

let btn = document.querySelector('#add');
let lista = document.querySelector('#lista');

btn.addEventListener('click', function() {
    let item = document.createElement('li');
    item.innerHTML = 'Item';
    lista.appendChild(item);
});

ul {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

ul > li {
  flex-grow: 1;
}

/* O CSS abaixo é apenas para facilitar a visualização */
ul {
  list-style: none;
  padding: 0;
}

ul > li {
  background-color: #ffdd57;
  text-align: center;
  padding: 10px;
}

ul > li:nth-of-type(2n) {
  background-color: #00d1b2;
}

<ul id="lista">
  <li>Item</li>
</ul>

<hr>

<button id="add">Add</button>

Answer 3

You are not using the main utility of Bootstrap which is the grid system.

I believe this will suit you.

You always need to have the classes col within the 'Row' class so that it is always readjusted according to the size of the browser or device

<main class='container'>
    <div class='row'>
         <div class='col'>Link lorem ipsum dolor</div>
         <div class='col'>Link lorem ipsum dolor</div>
         <div class='col'>Link lorem ipsum dolor</div>
    </div>
</main>

The more div s with col inside row, will automatically split right. If you do not fetch the database information, you can leave dynamic with JS.