Responsive horizontal grid with CSS
I am trying to create a flexible grid with rectangles that are the same height but vary in length. These boxes should be filled with images that maintain the correct ratio without stretching (for example, image dimensions: 400x400, 600x400, 800x400, ...).
I've tried a couple of things:
- Loading grid: worked fine, but only when there is no horizontal margin, the margin will be considered extra width and images will have different heights.
- Flexbox: also worked fine, but the lines don't have the same height.
- Other css frameworks had the same problem as bootstrap.
I am going to use a pure CSS solution.
Is it possible? (Other methods or solutions for flexbox / css-frameworks issues)
+3
source to share
1 answer
Look at this...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.container {
text-align: justify;
}
.container > div {
display: inline-block;
vertical-align: top;
*display: inline;/*for ie*/
zoom: 1;
}
.container:after {
content: "";
width: 100%;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<div><img src="http://placehold.it/100x100&text=placehold.it+rocks!/"></div>
<div><img src="http://placehold.it/50x100&text=placehold.it+rocks!/"></div>
<div><img src="http://placehold.it/200x100&text=placehold.it+rocks!/"></div>
<div><img src="http://placehold.it/150x100&text=placehold.it+rocks!/"></div>
</div>
</body>
</html>
0
source to share