Ранее

.col-3{
width: 33%;
float: left;

}

Сейчас

Самый удобный способ — CSS Grid ⭐

Grid намного проще менять количество колонок.

3 колонки

.row {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.row {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

.row {
display: grid;
grid-template-columns: repeat(5, 1fr);
}

.row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}

Flexbox (через ширину flex-basis)

Пример:

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.col {
  flex: 0 0 25%;
}

Меняешь процент ширины.

3 колонки

.col {
  flex: 0 0 33.333%;
}

4 колонки

.col {
  flex: 0 0 25%;
}

5 колонок

.col {
  flex: 0 0 20%;
}

Flexbox через calc() (если есть gap)

Когда есть gap, проценты могут ломаться, поэтому используют calc.

4 колонки

.col {
flex: 0 0 calc(25% - 20px);
}