Aligning list to get 100% width on every row - html

Question

I have the following html and css code:
.catering-cities {
text-align: left;
margin-left: 0 !important;
}
.catering-cities li {
display: block;
float: left;
}
.catering-cities a {
display: block;
background-color: #d6d6d6;
color: #212121;
padding: 15px 10px;
margin: 0 2px 2px 0;
font-size: 11px;
text-transform: uppercase;
}
<ul class="catering-cities clearfix margin_bottom_20">
<li>Augustów</li>
<li>Bartoszyce</li>
<li>Bełchatów</li>
<li>Biała Podlaska</li>
<li>Białystok</li>
<li>Bielsk Podlaski</li>
<li>Brzeg</li>
<li>Bydgoszcz</li>
<li>Chełm</li>
<li>Chrzanów</li>
<li>Ciechanów</li>
<li>Częstochowa</li>
<li>Elbląg</li>
<li>Ełk</li>
<li>Gdańsk</li>
<li>Gdynia</li>
<li>Gliwice</li>
<li>Głogów</li>
<li>Kalisz</li>
<li>Katowice</li>
<li>Kędzierzyn Koźle</li>
<li>Kielce</li>
<li>Kluczbork</li>
<li>Kołobrzeg</li>
<li>Konin</li>
<li>Koszalin</li>
<li>Kraków</li>
<li>Legnica</li>
<li>Lubin</li>
<li>Lublin</li>
</ul>
What I want to achieve is for the ul to fill 100% of the width, the li elements taking a dynamic size, with the same margin inbetween. Something similar to text-align:justify but for ul li elements.
Is this possible to do by changing padding for every element?

Answer 1

You can use flexbox for this together with flex-grow:1 on the li. See snippet below
.catering-cities{
text-align:left;
margin-left:0 !important;
display:flex;
flex-wrap:wrap;
padding-left:0!important;
}
.catering-cities li{
display:block;
flex-grow:1;
}
.catering-cities a{
display:block;
background-color:#d6d6d6;
color:#212121;
padding:15px 10px;
margin:0 2px 2px 0;
font-size:11px;
text-transform:uppercase;
}
<ul class="catering-cities clearfix margin_bottom_20">
<li>Augustów</li>
<li>Bartoszyce</li>
<li>Bełchatów</li>
<li>Biała Podlaska</li>
<li>Białystok</li>
<li>Bielsk Podlaski</li>
<li>Brzeg</li>
<li>Bydgoszcz</li>
<li>Chełm</li>
<li>Chrzanów</li>
<li>Ciechanów</li>
<li>Częstochowa</li>
<li>Elbląg</li>
<li>Ełk</li>
<li>Gdańsk</li>
<li>Gdynia</li>
<li>Gliwice</li>
<li>Głogów</li>
<li>Kalisz</li>
<li>Katowice</li>
<li>Kędzierzyn Koźle</li>
<li>Kielce</li>
<li>Kluczbork</li>
<li>Kołobrzeg</li>
<li>Konin</li>
<li>Koszalin</li>
<li>Kraków</li>
<li>Legnica</li>
<li>Lubin</li>
<li>Lublin</li>
</ul>