1

How to organize a list of items into 4 columns using only CSS?

Like this: https://i.stack.imgur.com/SjJ7B.jpg

Here is my code:

                                <div class="cus-field-item tenhocomodidades cus-wid-12">
                        <div class="cus-field-title">
                            Comodidades no imóvel                       </div>
                        <div class="cus-field-content">
                        <div class="cus-field-cont-item">Academia</div><div class="cus-field-cont-item">Praça</div><div class="cus-field-cont-item">Biblioteca</div><div class="cus-field-cont-item">Rampa para deficientes</div><div class="cus-field-cont-item">Sala de Cinema</div><div class="cus-field-cont-item">Salão de Jogos</div><div class="cus-field-cont-item">Nenhuma</div><div class="cus-field-cont-item">Churrasqueira</div><div class="cus-field-cont-item">Parquinho</div><div class="cus-field-cont-item">Quadra de Basquete</div><div class="cus-field-cont-item">Quadra de Vôlei</div><div class="cus-field-cont-item">Piscina</div><div class="cus-field-cont-item">Elevador</div><div class="cus-field-cont-item">Quadra de Futebol</div><div class="cus-field-cont-item">Quintal</div><div class="cus-field-cont-item">Salão de Festas</div><div class="cus-field-cont-item">Quadra de Squash</div><div class="cus-field-cont-item">Portaria</div><div class="cus-field-cont-item">Garagem</div><div class="cus-field-cont-item">Brinquedoteca</div><div class="cus-field-cont-item">Internet</div><div class="cus-field-cont-item">Quadra de Tênis</div><div class="cus-field-cont-item">Sacada</div><div class="cus-field-cont-item">Sauna</div>                     </div>
                    </div>

Thanks

Kelson Batista
  • 406
  • 4
  • 25

1 Answers1

1

Often, those little lists are 4 seperate lists. This is useful for different layout reasons / and also to group like items. So, consider that as an option - but for true columns - you can use https://developer.mozilla.org/en-US/docs/Web/CSS/columns

ul {
  list-style: none;
  margin: 0;
  padding: 0;
} /* remove defaults */

ul {
  columns: 4;
}
<ul>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
  <li>one</li>
</ul>

But - you can use flexbox or grid - or a few other ways depending on the situation.

sheriffderek
  • 8,848
  • 6
  • 43
  • 70