JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<ul class="column">
<li>
<div class="block">
</div>
</li>
<li>
<div class="block">
</div>
</li>
<li>
<div class="block">
</div>
</li>
</ul>
</div>
CSS
ul.column{
width: 100%;
padding: 0;
margin: 10px 0;
list-style: none;
}
ul.column li {
float: left;
width: 250px;
padding: 0;
margin: 5px 0;
display: inline;
}
.block {
height: 108px;
font-size: 1em;
margin-right: 10px;
padding: 20px;
background: #e3e1d5;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
JavaScript
function smartColumns() { //функция, подсчитывающая ширину колонок
//сброс ширины строки до 100% после изменения размера экрана
$("ul.column").css({ 'width': "100%" });
var colWrap = $("ul.column").width(); //определяем ширину строки
var colNum = Math.floor(colWrap/200); //определяем, сколько столбцов в 200px вместится в строку и округляем число до целого
var colFixed = Math.floor(colWrap / colNum); //ширину строки делим на количество столбцов, округляем до целого числа, в результате получаем точную скорректированную ширину колонки
$("ul.column").css({ 'width': colWrap }); //ставим точную ширину строки в пикселях вместо использования % - это предотвратит возможные баги в разных браузерах при различных разрешениях экрана
$("ul.column li").css({ 'width': colFixed }); //ставим точную ширину измененным столбцам
}
smartColumns(); //запускаем функцию после загрузки страницы
$(window).resize(function () { //запускаем функцию после каждого изменения размера экрана
smartColumns();
});