Is there a way to ensure that a div automatically moves below the main div when it reaches its full length?

Question

Is there a way to ensure that a div automatically moves below the main div when it reaches its full length?

I am facing an issue with a foreach statement in jQuery where I am generating Bootstrap cards for each product in a list. The problem arises when attempting to create multiple cards in a row, as the width of the cards becomes too small for the content.

I am trying to achieve a layout where if there are 3 cards in a row like this:

| div | div | div |

The 4th card should automatically move underneath the first card, like this:

| div | div | div |

| div |

However, I have been unable to find a solution to achieve this. I believe it can be done using the grid system in Bootstrap, but I have been unsuccessful in implementing it.

Below is the code snippet I am working with:

<div class="row justify-content-md-center">
    <div class="col-12">
        <table class="table table-striped">
            <div id="card-deck" class="card-deck">
                 //foreach loop here   
            </div>
        </table>
    </div>
</div>

jquery css bootstrap-5

Answer 1

Answer №1

Here is a CSS solution you can experiment with:

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    justify-content: flex-start;
}
.item {
    width: 100%;
}

One drawback of this approach is that if the item width does not adjust to the screen size, there may be empty space at the end of each row.

To address this issue, consider setting the item width using percentages and specifying a min-width.

Answer 2

Here is a CSS solution you can experiment with:

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    justify-content: flex-start;
}
.item {
    width: 100%;
}

One drawback of this approach is that if the item width does not adjust to the screen size, there may be empty space at the end of each row.

To address this issue, consider setting the item width using percentages and specifying a min-width.

Is there a way to ensure that a div automatically moves below the main div when it reaches its full length?

Answer №1

Similar questions

Unable to get the div to properly follow when scrolling, even when using the fixed position attribute

Tips for implementing a CSS override for a block element's relative date

"Encountering problems with posting errors in Ajax, PHP, jQuery, and CodeIgn

tips for moving a button 2 pixels up or down in position

Accessing the Div id stored in a session parameter

Image background is not showing up in the input field

ui-jq flot graph with lazy loading

Failure of window marker to trigger click event in jquery-bing-maps

Try uploading a file with the imageUpload function in JavaScript, could be something basic

Adjusting the size of a Video/Image Slider to perfectly fit the screen dimensions (both width and height

What is the best way to retrieve the parent element quickly using Jquery?

Alert: Font preload was not utilized within a short timeframe after the window's load event

Identifying collisions or contact between HTML elements with Angular 4

Responsive Design and the Importance of Setting Min-Width in Bootstrap 3

Does jQuery provide a counter function to ajaxComplete?

Tips for adjusting UI size in CSS based on viewport dimensions and accommodating image content

Ways to minimize excessive gap between two columns in Bootstrap

enable jQuery timer to persist even after page refresh

Adjusting the letter spacing of individual characters using HTML and CSS

Update the href attribute when a button is clicked