create list of image in different size - html

I have many images & I want to create a list of images like this:
but I generate this list & images not placed correctly:


For this specific case you could just use a grid with template areas as that gives you good control over positioning.
Essentially your grid will have six columns and six rows.
I'll come back to this shortly and put up a snippet but I thought you might like this idea immediately and look into it in case of use.
UPDATE: here's a snippet using grid. Obviously you'll need to put the right background-image into each div.
.container {
display: grid;
grid-template-columns: repeat(6, 12vw);
grid-template-rows: repeat(6, 12vw);
grid-gap: 1vw;
}
.container div:nth-child(1) {
grid-row: 1/span 2;
grid-column: 1/span 2;
}
.container div:nth-child(14) {
grid-row: 3/ span 2;
grid-column: 3/ span 2;
}
.container div:nth-child(27) {
grid-row: 5/ span 2;
grid-column: 5/ span 2;
}
.container div {
background-image: url(https://i.stack.imgur.com/ukCns.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>


One way is to group content into html groups and control them that way. Just depends on the overall application of what you're trying to do. This is also responsive as well.
img {
width: 100%;
display: flex;
}
.row {
display: flex;
}
#media(max-width: 768px){
.row {
flex-direction: column;
}
}
.row .group.count-1,
.row .group.count-4 {
width: 33%;
}
#media(max-width: 768px){
.row .group.count-1,
.row .group.count-4 {
width: 100%;
}
}
.row .group.count-4 {
display: flex;
flex-wrap: wrap;
}
.row .group.count-1 img,
.row .group.count-4 img {
margin: 1%;
}
#media(max-width: 768px){
.row .group.count-1 img,
.row .group.count-4 img {
margin: 0 0 1%;
}
}
.row .group.count-1 img {
width: 98%;
}
#media(max-width: 768px){
.row .group.count-1 img {
width: 100%;
}
}
.row .group.count-4 img {
width: 48%;
}
#media(max-width: 768px){
.row .group.count-4 img {
width: 100%;
}
}
<div class="container">
<div class="row">
<div class="group count-1">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
</div>
<div class="row">
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-1">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
</div>
<div class="row">
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-1">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
</div>
</div>

Related

In MediaQuery, is it normal for an element to have a certain property that we set for it in a certain width before it reaches that width?

I set flex-basis: 50% for screens with widths from 767px to 1199px, and for screens with widths from 1199px to above flex-basis: 25%, but I noticed that before we got to screens with widths of 1199px, flex-basis was equal to 25%, although I set flex-basis: 25% on screens that have a width of 1199px up (see picture). Is this normal?
See this picture for more clarification : The picture
This is the code used :
.portfolio {
padding-top: var(--section-padding);
padding-bottom: var(--section-padding);
}
}
.portfolio .imgs-container {
display: flex;
flex-wrap: wrap;
margin-top: 60px;
}
#media (min-width: 768px) {
.portfolio .imgs-container .box {
flex-basis: 50%;
}
}
#media (min-width: 1199px) {
.portfolio .imgs-container .box {
flex-basis: 25%;
}
}
.portfolio .imgs-container .box img {
max-width: 100%;
}
<div class="portfolio">
<div class="imgs-container">
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
<div class="box">
<img src="">
<div class="caption">
<h4>Awesome Image</h4>
<p>Photography</p>
</div>
</div>
</div>
</div>
Note: Thanks to everyone who answered, I finally understand why this is happening.

Try to be more specific when setting media queries...
#media screen and (min-width: 768px) and (max-width: 1198px) {
.portfolio .imgs-container .box {
flex-basis: 50%;
}
}
#media screen and (min-width: 1199px) {
.portfolio .imgs-container .box {
flex-basis: 25%;
}
}

HTML and CSS gallery grid design

How can I make this gallery with text please help
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 25px;
grid-row-gap: 25px;
width: 100%;
}
.wrapper>div img {
max-width: 100%;
}
<div id="contents">
<div class="wrapper">
<div>
<img src="one.jpg">
</div>
<div>
<img src="two.jpg" alt="">
</div>
<div>
<img src="one.jpg" alt="">
</div>
<div>
<img src="four.jpg" alt="">
</div>
<div>
<img src="two.jpg" alt="">
</div>
<div>
<img src="four.jpg" alt="">
</div>
</div>
</div>

Instead of using repeat(3, 1fr) make the width of the first column as 2fr.
Using background color to show the structure as I have no image.
.wrapper {
display: grid;
grid-template-columns: 2fr repeat(2, 1fr);
grid-column-gap: 25px;
grid-row-gap: 25px;
width: 100%;
}
.wrapper>div img {
max-width: 100%;
}
.text {
background-color: black;
opacity: 0.25;
color: white;
text-align: center;
}
.wrapper>div {
background-color: green;
}
<div id="contents">
<div class="wrapper">
<div>
<img src="one.jpg">
<div class="text">Image 1</div>
</div>
<div>
<img src="two.jpg" alt="">
</div>
<div>
<img src="one.jpg" alt="">
</div>
<div>
<img src="four.jpg" alt="">
</div>
<div>
<img src="two.jpg" alt="">
</div>
<div>
<img src="four.jpg" alt="">
</div>
</div>
</div>

Why after the third row the float property does not work correctly? [duplicate]

This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
After some rows the css float property have a strange behavior that i couldn't know its reason.
Take into account that I cannot add a div with a "clear" property between the rows because the html will be generated dynamically (php loop).
I think that in order to do that I should create a function in php that determines when to insert a clear div between the rows because sometimes there are 2 images per and other times 3.
But I prefer a CSS solution.
Here is the full code:
.row {
width: 600px;
text-align: center;
margin: 0 auto;
}
.boxes{
box-sizing: border-box;
position: relative;
min-height: 1px;
height: auto;
float: left;
padding-left: 10px;
padding-bottom: 10px;
}
.box1 {
width: 33.33333333333333%;
}
.box2 {
width: 66.66666666666666%;
}
.box-inner {
background-color: grey;
width: 100%;
height: 100%;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
<html>
<body>
<div class="row">
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
</div>
</body>
</html>

In your example, you have an image that's slightly shorter than the one before it. That's causing the gap on the following row which clear would normally fix. if you had the same number of elements per row then something like nth-child could be used with clear, but since you said the number of elements per line could change, that wouldn't work. An easy fix is to set a minimum height on your .box-inner class:
.row {
width: 600px;
text-align: center;
margin: 0 auto;
}
.boxes {
box-sizing: border-box;
position: relative;
min-height: 1px;
height: auto;
float: left;
padding-left: 10px;
padding-bottom: 10px;
}
.box1 {
width: 33.33333333333333%;
}
.box2 {
width: 66.66666666666666%;
}
.box-inner {
background-color: grey;
width: 100%;
height: 100%;
min-height: 122px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
<div class="row">
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
</div>

The easiest solution is to add a fixed height to your container.
.box-inner {
background-color: grey;
width: 100%;
height: 120px;
overflow: hidden;
}
Another addition to the above is to add object-fit: cover to your image to ensure it fills the container space.
.box-inner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

Grid layout with items in different sizes

I'm stuck with one problem I don't know how to solve.
I have a grid system with 18 items/boxes in the same size. I need to delete 4 items/boxes and make one big item/box of it.
Please check wireframe below. This is how I want it to look :)
.grid_big {
margin-bottom: 200px;
}
.grid_big .grid_item {
width: 16.6%;
display: inline-block;
float: left;
}
.grid_big .grid_item img {
width: 100%;
border: 1px solid;
/* visibility: hidden; */
}
.grid_big .grid_item .grid_content {
margin: 20px;
}
<div class="grid_big">
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="fixfloat"></div>
</div>
( grid item + grid content x 18 )

You can do something like this with the Grid, which is ideal for this type of a task:
* {box-sizing: border-box}
.grid_big {
display: grid;
grid-template: repeat(3, 1fr) / repeat(6, 1fr); /* grid-template-rows / grid-template-columns */
grid-gap: 10px; /* grid-row-gap / grid-column-gap */
}
/* grab the 7th one and make it span 2 rows & columns */
.grid_item:nth-child(7){
grid-row: span 2;
grid-column: span 2;
}
img {
display: block; /* removes bottom margin/whitespace */
width: 100%;
border: 1px solid;
}
<div class="grid_big">
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
</div>

Grid (grid-template-areas) might solve your problem.

CSS Flexbox: wrap item tile grid, specify items per row?

I have a div with 20 items:
<div class="brand-illustrations">
<img src="modules/foundation/assets/images/pb_brand_icons_01_Shipping.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_02_Time_Savings.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_03_Increase.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_04_Decrease.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_05_Money.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_06_Money_Savings.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_07_Accuracy.svg">
...etc...
</div>
And I made the enclosing div a flexbox:
.brand-illustrations {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
img {
display: block;
}
}
Which does as expected:
But I'd prefer to wrap to the next row after every 5th item. I know about n-th-child but am unsure the best way to use it with flex items.

You can't force flexbox to wrap as it has no grid function. At best you can fix the width of each flex-item to 20% with 'flex: 0 0 20%'..but I'd suggest wrapping each image in a div as they have unexpected results under flexbox.
Codepen Demo
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.box {
flex: 0 0 20%;
text-align: center;
margin-bottom: 1em;
}
img {
max-width: 100%;
min-width: 0;
height: auto;
}
<div class="container">
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
</div>