Как свободно упаковать, расположить себя по ширине каждого HTML-элемента (div) внутри большого html-элемента (div)?

Question

вот изображение

Как показано на этом изображении, я хочу упаковать div внутри short eats div. Например, div с рыбными булочками можно поместить также в div с китайскими роллами. Я просто не хочу там пустого пространства. Эти дивы появляются динамически, хотя.

Я добавил мой код вида laravel ниже, если вам нужно.

<div class="col-md-4 border border-primary rounded">
    <h4>Short Eats</h4>
    @foreach($shorteats as $shrt)                    
        <div>
        <a href="#" onclick="order('{{$shrt->dish_name}}')" class="btn btn-li btn-lg"> {{$shrt->dish_name}}</a>          
        </div>
    @endforeach                
</div>

<div class="col-md-4 border border-primary rounded">
    <h4>Rice</h4>
    @foreach($rice as $ric)                    
        <div>
        <a href="#" onclick="order('{{$ric->dish_name}}')" class="btn btn-li btn-lg"> {{$ric->dish_name}}</a>          
        </div>
    @endforeach                
</div>

Answer 1

Вы можете добавить класс (например, .menu-container) к вашему <div>, который является родительским для вашего тега привязки, и использовать flexbox, чтобы (надеюсь) достичь того, что вы хотите:

HTML:

<div class="menu-container">
    <a href="#" onclick="order('{{$ric->dish_name}}')" class="food-item btn btn-li btn-lg">{{$ric->dish_name}}</a>          
</div>

CSS:

.menu-container {
  display: flex;
  flex-wrap: wrap;
}

.food-item {
  // styles for your anchor tag go here
}