How to set the overall Grid thumbnail height to be equal?


Tags: javascript,html,css,twitter-bootstrap

Problem :

I have a grid of thumbnails. It's coded in <ul> as a wrapper and <li> for displaying each thumbnails. I have set the following CSS to the <li> tag:

float: none;
display: inline-block !important; 

The thumbnails are displaying in a Grid. I have also used Bootstrap classes in <li class="col-xs-12 col-sm-6 col-md-3 col-lg-3">. As per assigned classes it should display 4 thumbnails per row. But currently it's displaying only 3 thumbnails per row. I searched and found that it's because <li>s are given display: inline-block and there are line break in HTML after each <li> in the HTML file. Please let me know how to display 4 thumbnails per row using display: inline-block.

Also if I set the float: left for <li> then I should give height for each <li>. But the images within those <li>s are of different size.

The problems are:

  1. I want to display 4 columns per row (now only 3 are displaying)
  2. I want to set the border-right to cover whole height of the grid row. (Now since height of the <li> is according to the height of the thumbnail, the border-right is spanning till half the row for smaller thumbnails.)

Please help me with this.

body {
            background-color: #ddd;
            }

            .list-unstyled {
            background-color: #eee;
            width: 100%;
            }

            .list-unstyled li{
            background-color: #eee;
            float: none;
            display: inline-block !important;  
            /*display: -moz-grid !important;*/
            padding: 10px;
            margin: 0;
            border-right: 2px solid #ddd;
            border-bottom: 2px solid #ddd;
            box-sizing: border-box;    
            }

            .list-unstyled li img{
            width: 100%;
            }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9">
        <ul class="list-unstyled">
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/A-HAPPY-SUNDAY.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/12/cover17.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/09/cover1.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary" >Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/Bolne-Wali-Ghadi.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover14.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary" >Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2016/01/cover.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/Chhoti-Chinti-ki-Badi-Dawat.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover7.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover13.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/Fu-ku.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover8.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/cover7.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
        </ul>
        </div>
        </div>
      </div>



Solution :

Just remove display: inline-block !important; from .list-unstyled li and give display: flex; flex-wrap: wrap; to .list-unstyled will make it as your expected result.

.list-unstyled {
   background-color: #eee;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
}

Working Fiddle

Edit:

Give display: flex; align-items: flex-end; to .list-unstyled li

Updated Fiddle


    CSS Howto..

    How to select where my overflow ellipsis starts

    How is the radial gradient added here?

    How to add a tooltip for just the background image of an input field with HTML and CSS

    How to match the last n children with CSS?

    How do I stop the FLOAT (without extra markup)?

    How to Troubleshoot CSS?

    How does Matt Haughey's blog insert rosettes in each post title? [closed]

    How to indent text in a select drop down menu using CSS

    How to remove gap in masonry?

    How to get an automatic effect of rosace in css ?

    How to add vertical gradient using css?

    How to make a CSS horizontal navigation menu?

    How to suppress specific CSS 2.0 validation errors in Visual Studio 2008?

    How to move img src a few pixels down in html page

    How could i make CSS apply to all in a div?

    How to minimize the number of CSS classes created?

    How to style responsive table to make table like list?

    How to include child div into parent div automatically?

    How to make a new class

    How to draw a horizontal line between two circles with css?

    How to set class on div that is inside of repeater in code behind?

    How does jQuery's toggle function work, how to write it in javascript without jquery?

    How to override a style of a specific Joomla module?

    How do I vertically align my multi-line p tag in my header?

    CSS: How to set up border radius cross browser (only IE8 and IE9 missing ?)

    How do I format text to wrap onto a second line using bootstrap?

    Using javascript to show html on every page except one page

    how to change the CSS linear-gradien backgroundt height (thickness)?

    How to import a css file in a react component?

    How to dynamically add more width inside a div?