I have a collection of image thumbnails organized in a grid format. The HTML structure uses <ul> as a wrapper and <li> elements to display each thumbnail. I have applied the following CSS properties to the <li> tag:
float: none;
display: inline-block !important;
The thumbnails are currently displaying in a grid layout, with 3 thumbnails per row instead of the intended 4. The issue arises from using display: inline-block on the <li> elements, which causes a line break after each one. Can you suggest a solution to achieve 4 columns per row while maintaining display: inline-block?
If I switch to float: left for the <li> elements, I would need to set a fixed height for each one. However, the images inside these elements have varying heights.
The challenges include:
- To display 4 columns per row instead of 3
- To extend the right border to cover the full height of the row, despite different thumbnail heights
Assistance is greatly appreciated.
body {
background-color: #ddd;
}
.list-unstyled {
background-color: #eee;
width: 100%;
}
.list-unstyled li{
background-color: #eee;
float: none;
display: inline-block !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%;
}