CODEWITHSUNDEEP
cssresponsive-design
Matthew Dolman
Matthew Dolman

Reputation: 1800

CSS Grid Items Resized Depending on Container Width

I have a grid something like this:

<div class="container">
    <div class="item">
        Some Content
    </div>
    <div class="item">
        Some Content
    </div>
    <div class="item">
        Some Content
    </div>
    <div class="item">
        Some Content
    </div>
    <div class="item">
        Some Content
    </div>
    <div class="item">
        Some Content
    </div>
</div>

And CSS like this

.container{
width:100%;
}

.item{
width:33%;
float:left;
min-width:150px
}

What happens in this situation is that if the container is bigger than 450 pixels you get three columns and two rows. If the container's width reduces to below 450px you end up two columns and three rows and the items are forced to 150px width.

The problem is that there is unsightly whitespace to the right of the second item.

I would like to make it so that the items always fill the container's width. Is this possible?

Upvotes: 0

Views: 646

Answers (1)

Chandru velan
Chandru velan

Reputation: 146

Have you tried jQuery Masonry? I think that it's the best solution to your problem: jquery masonry

Upvotes: 1

Related Questions