I am making use of a gallery which represents a column containing either one or two <div> elements spanning across the entire width. The columns containing multiple <div> elements also contain images with different height and width properties. I would like these columns to be the same height and then fill the width as much as possible whenever there is extra space between them.
I would use a flexbox <div> element with a fixed width and a flex-wrap property. The <div> elements that are to span the entire width have a property max-width: 100%. A row with multiple items are inside a container <div> element which spans and then each in another box <div> element. I could get the two on the same lines, but since they vary in sizes I would not want each image to be 50% width, because then the empty space is above and below an item instead of between them.
I have tried tinkering with flex-grow, flex-shrink and flex-basis, however none of these seem ever to be exact. I also considered switching the <div> elements with two items to flex-direction: column and then wrap these. This however did not work for me.
.column {
width: 600px;
display: flex;
flex-wrap: wrap;
}
.smallContain {
min-width: 100%;
display: flex;
align-content: space-between;
}
.smallBox {
flex: 1 1 50%;
}
.largeBox {
min-width: 100%;
}
img {
max-width: 100%;
}
<body>
<div id="container">
<div class="column">
<div class="smallContain">
<div class="box smallBox">
<img src="#" class="imgS">
</div>
<div class="box smallBox">
<img src="#" class="imgS">
</div>
</div>
<div class="box largeBox">
<img src="#" class="imgL">
</div>
<div class="smallContain">
<div class="box smallBox">
<img src="#" class="imgS">
</div>
<div class="box smallBox">
<img src="#" class="imgS">
</div>
</div>
<div class="box largeBox">
<img src="#" class="imgL">
</div>
<div class="smallContain">
<div class="box smallBox">
<img src="#">
</div>
<div class="box smallBox">
<img src="#">
</div>
</div>
<div class="smallContain">
<div class="box smallBox">
<img src="#" class="imgS">
</div>
<div class="box smallBox">
<img src="#" class="imgS">
</div>
</div>
<div class="box largeBox">
<img src="#" class="imgL">
</div>
</div>
</div>
</body>
(Within the example above, the .imgS class refer to small images and .imgL class refer to large images)
Here's an example of what I'm hoping to get it to look like.
your question is a bit hard to understand, even so I gave it a try, maybe what your looking is something like this?
.grid {
align-items: stretch;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.grid .item {
max-height: 400px;
padding: 5px;
}
.grid .item.smallBox {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
}
.grid .item.smallBox img {
object-fit: cover;
object-position: center;
}
.grid .item.largeBox {
flex-basis: 100%;
flex-grow: 1;
flex-shrink: 1;
}
.grid .item img {
height: 100%;
width: 100%;
}
<div class="grid">
<div class="item smallBox">
<img src="http://placeholder.pics/svg/280x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/280x500" alt="">
</div>
<div class="item largeBox">
<img src="http://placeholder.pics/svg/1920x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/480x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/250x500" alt="">
</div>
<div class="item largeBox">
<img src="http://placeholder.pics/svg/1440x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/250x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/480x500" alt="">
</div>
<div class="item largeBox">
<img src="http://placeholder.pics/svg/1440x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/500x500" alt="">
</div>
<div class="item smallBox">
<img src="http://placeholder.pics/svg/150x500" alt="">
</div>
<div class="item largeBox">
<img src="http://placeholder.pics/svg/1440x500" alt="">
</div>
</div>
Hope it helps, good luck.
Related
This question already has answers here:
What is the difference between auto-fill and auto-fit?
(3 answers)
Closed 2 months ago.
I am trying to make the spacing between the images less. I have tried grid gap, but its not seeming to make any difference. I just want to be able to control this area.
#Listed {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
}
.Img {
width: 60px;
height: 60px;
}
<div id="Listed">
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/1">
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/2"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/3"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/4"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/34"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/6"><br>
</div>
</div>
This is caused by using auto-fill which will cause the elements to fill the entire width. Try using auto-fit with a 60px value in the minmax like...
#Listed {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}
.Img {
width: 60px;
height: 60px;
}
<div id="Listed">
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/1">
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/2"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/3"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/4"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/34"><br>
</div>
<div class="style">
<img class="Img" src="https://source.unsplash.com/random/6"><br>
</div>
</div>
I have a basic flexbox implementation like this
.holder {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 500px;
background: wheat;
}
.col img {
max-width: 100%;
}
.col {
width: 20%;
float: left;
text-align: center;
}
<div class="holder">
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
I am trying to add some padding in between each of the items but not at the edges.
Is flexbox the best solution for this and does anybody have an example they can point me at?
You can use the flex-basis property where you set the initial width using the calc() function:
.holder {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 500px;
background: wheat;
}
.col img {
max-width: 100%;
}
.col {
/*width: 20%;*/
/*float: left; not necessary*/
flex-basis: calc(20% - 5px);
text-align: center;
}
/* addition, if desired */
img {
display: block; /* removes bottom margin/whitespace; "vertical-align: bottom" does the same */
}
<div class="holder">
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
For flex box it is pretty easy. Just make the correct width for the items and set justify-content property of container to space-between. Make sure the sum of widths of items is less than 100% width of container.
I'm trying to style a gallery using Bootstrap and Flexbox where there is one large image and beside it is two smaller, stacked images and have both be the same height.
The container columns seem to be doing their job and staying the same height but I need the img within the column to fill the height of the container.
It works in Firefox if I use height: 100% on the img but this breaks in both Chrome and Safari.
img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
figure {
margin-bottom: 0;
}
.rts-col {
margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="rts-col col-8">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-4">
<figure style="margin-bottom: 30px;">
<img src="http://via.placeholder.com/1400x933">
</figure>
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
</div>
</div>
Here's the markup and stylesheet: https://jsfiddle.net/tylorreimer/q8qe5p80/2/
Looks to me as though you need nested flexboxes where you have multiple images on one side.
img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
figure {
margin: 0;
}
.rts-col.split {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="rts-col col-8">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-4 split">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
</div>
</div>
If you make the col-4 a flex container with column direction, you can then use justify-content and its space-between to align those 2 image top/bottom
Add d-flex flex-column justify-content-between to your <div class="rts-col col-4"> so it becomes <div class="rts-col col-4 d-flex flex-column justify-content-between">
Note, I also removed some of your margins to make them align better
img {
display: block;
max-width: 100%;
}
figure {
margin: 0;
}
.rts-col {
margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="rts-col col-8">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-4 d-flex flex-column justify-content-between">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-6">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
<div class="rts-col col-6">
<figure>
<img src="http://via.placeholder.com/1400x933">
</figure>
</div>
</div>
</div>
*{
box-sizing: border-box;
}
.results__item{
float: left;
width: calc(100%/3 - 40px/3)
}
.results__item:nth-child(3n-1){
margin-left: 20px;
margin-right: 20px;
}
.results__item__img-wrapper{
overflow: hidden;
}
.results__item__img-wrapper img{
width: 100%;
height: calc(100%/3 - 40px/3 + 90px)
}
.results__item__content{
word-wrap: break-word;
}
<div class="results">
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product1 Product1 Product1 Product1 Product1 Product1 Product1 Product1</div>
<div class="price">$122.00</div>
</div>
</div>
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product2</div>
<div class="price">$122.00</div>
</div>
</div>
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product2</div>
<div class="price">$122.00</div>
</div>
</div>
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product2</div>
<div class="price">$122.00</div>
</div>
</div>
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product2</div>
<div class="price">$122.00</div>
</div>
</div>
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product2</div>
<div class="price">$122.00</div>
</div>
</div>
</div>
I have created a grid layout. When the content of one item is more, the height of the row is not adjusting accordingly. How can I accomplish that?
Note: I dont want to use javascript for this. I am sure, this is possible with CSS
http://jsbin.com/kopatojiho/1/edit?html,css,output
Wrap every three images with a container. This way, you will have them all stack correctly beside each other as you can see on this image:
Also make sure to clear the collapsing on each of the containers you'll add as well, as they are collapsed because of the floated images. I normally use overflow: auto for this, but check this SO post for more ways to do it.
I'm trying to make a grid of Boostrap unevenly sized thumbnails. But some thumbnails are uneven, resulting in huge gaps between some rows.
I don't have any styling on the thumbnails.
Is there a way to fix it without adding something like Masonry/Isotope/Salvattore?
You can use two <div> or two .row tags like this:
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
</div>
For more info visit Example: Stacked-to-horizontal.
The cleanest way to fix your layout is to use a masonry type of layout. It will allow for the smoothest look and be a very fluid and responsive layout when dealing with mixed sized media. Though if you are in complete control of the data/images being placed on the site I would suggest creating each image to be identical in size and type. If you would like I can provide an example I have created using a masonry type of layout with thumbnails and Bootstrap.
Edit to add example code:
/* CSS styles */
.row {
-moz-column-width: 12em;
-webkit-column-width: 12em;
-moz-column-gap: 1em;
-webkit-column-gap:1em;
column-width: 12em;
column-gap: 1em;
column-fill: balance;
width: 100%;
}
/* Outer div block */
.section-block {
display: block;
padding: .25rem;
width: 100%;
}
/* Inner div block */
.section-item {
position:relative;
display: inline-block;
width: 100%;
}
.section-item img{
width: 100%;
}
//Wrapper for each img you are adding
<div class='section-block'>
<div class='section-item'>
<div>
<a href='#' class='thumbnail' data-toggle='modal' data-target='#id'>
<img src='/imgs/image.jpg'>
<p class='caption'>Image Caption</p>
</a>
</div>
</div>
</div>
I used this in conjunction with php to get all my images from a db then I looped over each image and echo'd to the page with the above syntax. This should work without having to use any additional js libraries beyond what you are using for bootstrap. This gives you a very responsive masonry style of layout that works in modern browsers.