У меня есть flexbox, следующий за шириной: calc(100% / 3); css.Это хорошо вписывается в экран, если есть более 6 дел.Тем не менее, у меня есть система фильтрации, поэтому потенциально пользователь может фильтровать и показывать только 2 деления.Затем это показывает много пустого пространства, у кого-нибудь есть идеи, как я могу обойти это?
calc(100% / 3);
На фильтре я пытался изменить ширину, но это выходит за рамки дизайна 3x2, который нам нужен.Пожалуйста, смотрите дизайн здесь http://www.project -progress.co.uk / intersystems / категория / финансы / # блоги-фильтр
.tiles .tile { flex-basis: calc(100% / 2); width: calc(100% / 3); position: relative; display: flex; overflow: hidden; box-sizing: border-box; } .tiles .tile:nth-child(1n) { flex-basis: calc(50% / 1); } .tiles { display: flex; flex-direction: column; flex-wrap: wrap; height: 100vh; overflow: auto; position: relative; overflow-x: scroll; }
<div class="tiles" id="blog-posts"> <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance6.jpg'); right: 0px;"> dsf </div> <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance5.jpg'); right: 0px;"> sdf </div> <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance6.jpg'); right: 0px;"> dsf </div> <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance5.jpg'); right: 0px;"> sdf </div> <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance6.jpg'); right: 0px;"> dsf </div> <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance5.jpg'); right: 0px;"> sdf </div> </div>