It's not my proudest moment to say that I am struggling with this since yesterday, I managed to make my gallery thumbnails look almost like the model in the picture that I uploaded, but I can't add the "image title" section. I managed at some point to put a title and the gray background, but when I hovered on it, only the image moved and not the title. Please help me so I can get rid of this problem once and forever (Thank you for your time):
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 20px;
background: rgb(255, 255, 255);
padding: 15px;
}
.box > img {
width: 80%;
display: block;
background-color: cornflowerblue;
border-radius: 12%;
}
.container img:hover {
transform: scale(1.04);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="placeholder-image.png">
<span>daa</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>Image</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>rrrr</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
<div class="box">
<img src="placeholder-image.png">
<span>strike</span>
</div>
</div>
</body>
If you want the hover styling to apply to the title text and the image, just use transform on the .box container hover state instead of only the image with .container img:hover. This way both the <img> and the <span> text will "move as one" since they are both children of the .box parent container. Try this out.
.box {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.box .title {
background: #ddd;
padding: .5rem 1rem;
text-align: center;
width: -webkit-fill-available;
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
}
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 20px;
background: rgb(255, 255, 255);
padding: 15px;
}
img {
max-width: 100%;
}
.box > img {
width: 100%;
display: block;
background-color: cornflowerblue;
border-top-right-radius: 1rem;
border-top-left-radius: 1rem;
/* border-radius: 12%;*/
}
.box:hover {
transform: scale(1.04);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://static.thenounproject.com/png/17840-200.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
</div>
</body>
Related
I want to acheive this design any next category will automatically adjust to the previous div. Every category have not specific product but need to just after the previous product like we use float left or display-flex But don't want to create multiple css for responsive. Because it has more than 25 categories. `
.offerpage .product-box {
margin: 0 5px;
}
.categoryProductsWrap{
width: 100%;
}
.product-img{
width: 100%;
}
.categoryProductsWrap .categoryProducts {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.categoryProductsWrap .categoryProducts .product-box {
margin-bottom: 10px;
float: left;
}
.offerpage .categoryName {
color: #161719;
font-size: 24px;
font-weight: bold;
margin-bottom: 0.5em;
border-bottom: solid 1px #dddddd;
padding-bottom: 0.125em;
}
.img-box{
position: relative;
padding-top: 124%;
display: inline-block;
width: 100%;
vertical-align: top;
}
.product-box .product-img{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.txt-content {
overflow: hidden;
position: relative;
}
.img-box{
position: relative;
padding-top: 124%;
display: inline-block;
width: 100%;
vertical-align: top;
}
.offerpage{
display: flex;
flex-wrap: wrap;
}
.categoryProductsWrap .categoryProducts .product-box{
width: 33.333%
}
#media (min-width: 1200px){
.categoryProductsWrap.cooling_fan {
width: 50%;
}
.categoryProductsWrap.accessories {
width: 50%;
}
}
#media (min-width: 1440px){
.categoryProductsWrap.accessories .categoryProducts .product-box,
.categoryProductsWrap.cooling_fan .categoryProducts .product-box {
width: calc(50% - 10px);
}
}
<div class="offerpage">
<div class="categoryProductsWrap accessories">
<div class="categoryName">Accessories</div>
<div class="categoryProducts clearfix offerzone-slider products-wrapper">
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="categoryProductsWrap cooling_fan">
<div class="categoryName">Cooling Fan</div>
<div class="categoryProducts clearfix offerzone-slider products-wrapper">
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="categoryProductsWrap asus">
<div class="categoryName">Asus</div>
<div class="categoryProducts clearfix offerzone-slider products-wrapper">
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="categoryProductsWrap audio">
<div class="categoryName">Audio Device</div>
<div class="categoryProducts clearfix offerzone-slider products-wrapper">
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`
If you want to use CSS grid, there no big difficulties simply check the documentation to understand the main CSS properties you need to add.
Also check this guide on CSS grid to undertand more and see examples.
Quick help
If I understand correctly you want 3 items max per row, to do that you will need to set:
grid-template-columns: repeat(3, 1fr);
The equivalent to flex-direction: row; is grid-auto-flow: row;
You will I presume also need a gap (spacing between items), something like that:
gap: 10px;
So a good starting point will be:
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row;
gap: 10px;
I leave you do the rest according to your needs.
I have so many divs in my website and I want to align them like this with CSS and HTML:
<div class="card" style="width: 18rem; margin: 16px;">
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">Music Name</p>
</div>
</div>
It looks like a Masonry Layout. Try the Below Code and make necessary modifications.
This snippet uses CSS-Grids. You will need to change basic styles on some grid-items to make it look exactly as yours :)
/* CSS reset */
*,
*::after,
*::before {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
position: relative;
}
html {
font-size: 62.5%;
}
/* Typography --------------------------------------------*/
body {
font-family: 'Helvetica Neue', sans-serif;
font-size: 2rem;
text-align: center;
}
.heading {
margin-bottom: 3rem;
}
.body-text {
font-size: 1.6rem;
line-height: 2.5rem;
margin: 0 auto;
width: 70%;
}
.footer-text {
color: #fff;
font-size: 1.5rem;
}
/* Grids --------------------------------------------*/
.container {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(12, 150px);
margin: 0 auto;
max-width: 90%;
padding: 3rem 0;
}
/* Grid images --------------------------------------------*/
.img {
border-radius: 1rem;
height: 100%;
width: 100%;
object-fit: cover;
}
/* Grid items --------------------------------------------*/
.item-4 {
grid-row: 2/5;
}
.item-5 {
grid-row: 2/6;
}
.item-6 {
grid-row: 2/4;
}
.item-7 {
grid-row: 5/6;
}
.item-8 {
grid-row: 4/6;
}
.item-9 {
grid-row: 6/11;
}
.item-10 {
grid-row: 6/7;
}
.item-11 {
grid-row: 6/9;
}
.item-12 {
grid-row: 7/12;
}
.item-13 {
grid-row: 9/13;
}
.item-14 {
grid-row: 11/13;
}
<body>
<main class="container">
<div class="item-1">
<img class="img" src="https://picsum.photos/500/300" alt="">
</div>
<div class="item-2">
<img class="img" src="https://picsum.photos/500/301" alt="">
</div>
<div class="item-3">
<img class="img" src="https://picsum.photos/500/302" alt="">
</div>
<div class="item-4">
<img class="img" src="https://picsum.photos/500/600" alt="">
</div>
<div class="item-5">
<img class="img" src="https://picsum.photos/500/800" alt="">
</div>
<div class="item-6">
<img class="img" src="https://picsum.photos/500/400" alt="">
</div>
<div class="item-7">
<img class="img" src="https://picsum.photos/500/304" alt="">
</div>
<div class="item-8">
<img class="img" src="https://picsum.photos/500/401" alt="">
</div>
<div class="item-9">
<img class="img" src="https://picsum.photos/500/900" alt="">
</div>
<div class="item-10">
<img class="img" src="https://picsum.photos/500/305" alt="">
</div>
<div class="item-11">
<img class="img" src="https://picsum.photos/500/500" alt="">
</div>
<div class="item-12">
<img class="img" src="https://picsum.photos/500/901" alt="">
</div>
<div class="item-13">
<img class="img" src="https://picsum.photos/500/700" alt="">
</div>
<div class="item-14">
<img class="img" src="https://picsum.photos/500/402" alt="">
</div>
<div class="item-15">
<img class="img" src="https://picsum.photos/500/306" alt="">
</div>
</main>
</body>
you can use grid layout
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
add this to a div and children of the div can be adjusted the way you want.
You can stack the card divs using display:flex property. Give display:flex property to your div container and flex-wrap:wrap so that the divs can wrap itself. Use any other flexbox properties you like on container after that. So your code might look like this.
<div class="card-container" style="display:flex;flex-wrap:wrap">
<div class="card" style="width: 18rem; margin: 16px;">
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
</div>
I tried I've fixed it, let me know if it is good for you:
This is also responsive..
<style>
.grid-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
}
.card {
margin: 5px;
font-size: 30px;
text-align: center;
flex: 1 1 150px; /* Stretching */
}
img{
width: 300px
}
</style>
<body>
<div class="grid-container">
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
</div>
</body>
I'm having trouble with my display grid layout when I include a display flex layout within it.
In my first example, I have my grid layout as I would like it. It is divided into 5 columns, the header takes up 100%, the footer 100%, and between them I have a filter element taking 20%, an items element taking 60%, and an aside element taking the other 20%. This works great.
However, in my seconds example, I've added a flex item within the items grid. When I do this, the filter and the aside elements no longer retain the intended 20%, and the items element becomes much larger. It seems as if the display flex is overriding
the display grid. I assume that this happens because both the display grid and display flex elements are taken out of the normal document flow.
So my question is, how do I use the display flex element with my grid's items element without losing the grid's intended layout (filter-20% items-60% aside-20%)?
.header {
grid-area: header;
background-color: coral;
}
.filter {
grid-area: filter;
background-color: aquamarine;
}
.items {
grid-area: items;
background-color: lightskyblue;
}
.aside {
grid-area: aside;
background-color: palegreen;
}
.footer {
grid-area: footer;
background-color: palevioletred;
}
.gridContainer {
display: grid;
grid-template-areas: "header header header header header" "filter items items items aside" "footer footer footer footer footer";
}
.gridContainer>div {
padding: 20px;
}
.flexContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.flexItem {
background-color: beige;
margin: 0px 0px 20px 0px;
}
Example 1:
<div class="gridContainer">
<div class="header">header</div>
<div class="filter">filter</div>
<div class="items">Items</div>
<div class="aside">items</div>
<div class="footer">footer</div>
</div>
<br /><br /><br /> Example 2:
<div class="gridContainer">
<div class="header">header</div>
<div class="filter">filter</div>
<div class="items">
<div class="flexContainer">
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
</div>
</div>
<div class="aside">items</div>
<div class="footer">footer</div>
</div>
You need to define those percentage or by default the content will define the width. Simply make each column to be 1fr to have the needed result:
.header {
grid-area: header;
background-color: coral;
}
.filter {
grid-area: filter;
background-color: aquamarine;
}
.items {
grid-area: items;
background-color: lightskyblue;
}
.aside {
grid-area: aside;
background-color: palegreen;
}
.footer {
grid-area: footer;
background-color: palevioletred;
}
.gridContainer {
display: grid;
grid-template-columns: repeat(5,1fr);
grid-template-areas:
"header header header header header"
"filter items items items aside"
"footer footer footer footer footer";
}
.gridContainer>div {
padding: 20px;
}
.flexContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.flexItem {
background-color: beige;
margin: 0px 0px 20px 0px;
}
Example 1:
<div class="gridContainer">
<div class="header">header</div>
<div class="filter">filter</div>
<div class="items">Items</div>
<div class="aside">items</div>
<div class="footer">footer</div>
</div>
<br /><br /><br /> Example 2:
<div class="gridContainer">
<div class="header">header</div>
<div class="filter">filter</div>
<div class="items">
<div class="flexContainer">
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
<div class="flexItem">
<img src="https://picsum.photos/150" />
</div>
</div>
</div>
<div class="aside">items</div>
<div class="footer">footer</div>
</div>
I have total 20 images of products. I want to show these images like 1st product should be on left side and related images of that product on right hand side. Remaining products should come under 1st product column wise on the left hand side.
Currently, I am trying to do so but it is now coming properly. I am not good with CSS though. Could someone tell me what I am doing wrong?
Below is my code.
HTML
for all products images
<mat-card class="example-card" fxFlex="60%;" fxFlex.xs="80%">
<div class="grid" *ngIf="resultData">
<div class="item photo" *ngIf="anums[0]">
<img class="photothumb" [src]="resultData[0]" (click)="openImageDialogbox(resultData[0])" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_01]">Zum Produkt {{ anums[0] }}</p>
</div>
</div>
<div class="item photo" *ngIf="anums[1]">
<img class="photothumb" [src]="resultData[1]" (click)="openImageDialogbox(resultData[1])" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_02]">Zum Produkt {{ anums[1] }}</p>
</div>
</div>
<div class="item photo" *ngIf="anums[2]">
<img class="photothumb" [src]="resultData[2]" (click)="openImageDialogbox(resultData[2])" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_03]">Zum Produkt {{ anums[2] }}</p>
</div>
</div>
</div>
</mat-card>
For image of first product (like logo, supporting images etc)
<div class="grid">
<div class="item photo" *ngIf="secondImage">
<img class="photothumb" [src]="secondImage" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p>Bild 2
</div>
<div class="item photo" *ngIf="thirdImage">
<img class="photothumb" [src]="thirdImage" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p>Bild 3</p>
</div>
</div>
<div class="item photo" *ngIf="fourthImage">
<img class="photothumb" [src]="fourthImage" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p>Bild 4</p>
</div>
</div>
<div class="item photo" *ngIf="logo">
<img class="photothumb" [src]="logo" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p>Logo</p>
</div>
</div>
<div class="item photo" *ngIf="brandImage">
<img class="photothumb" [src]="brandImage" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p>Siegel</p>
</div>
</div>
</div>
</div>
CSS
.grid {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 150px;
/* flex-direction: row wrap; */
}
.item {
background-color: #ffffff;
margin: 10px;
width: 300px;
}
.photothumb {
max-width: 200px;
max-height: 200px;
cursor: pointer;
}
.desc {
padding: 10px 10px 5px 10px;
cursor: pointer;
}
.desc img {
width: 50%;
margin: 0 10px 10px 0;
float: left;
}
.desc p {
margin-bottom: 10px;
font-family: 'Arial';
font-size: 15px;
}
.photo {
grid-row-end: span 2;
}
Solution which I did :
<mat-card class="example-card" fxFlex="60%;" fxFlex.xs="80%">
<div class='some-page-wrapper'>
<div class='row'>
<div class='column'>
<div class='blue-column' *ngIf="anums[0]">
<img [src]="resultData[0]" (click)="openImageDialogbox(resultData[0])" onError="this.src='/assets/noImage.png';">
<div class="desc">
<p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_01]">Zum Produkt {{ anums[0] }}</p>
</div>
</div>
</div>
<div class='green-column' *ngIf="secondImage">
<img [src]="secondImage" (click)="openImageDialogbox(secondImage)" onError="this.src='/assets/noImage.png';">
<div class="desc">
<p>Bild 2</p>
</div>
</div>
</div>
</div>
</mat-card>
CSS:
.some-page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
I'm trying to achieve something like the following page:
https://undsgn.com/uncode/homepages/blog-metro/
I have tried and was able to come as close as this: https://jsfiddle.net/futu7t1c/
But how can I get those 2 small-thumbs at the bottom to move up?
The order is big, small, small, big, small, small
<div id="blog-posts">
<div class="grid big-thumb">
Title
</div>
<div class="grid small-thumb">
Title
</div>
<div class="grid small-thumb">
Title
</div>
<div class="grid big-thumb">
Title
</div>
<div class="grid small-thumb">
Title
</div>
<div class="grid small-thumb">
Title
</div>
</div>
css
#blog-posts {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
-moz-column-gap: 0em;
-webkit-column-gap: 0em;
column-gap: 0em;
}
.grid {
background: #eee;
float: left;
position: relative;
color: #fff;
}
.big-thumb {
width: 50%;
height: 600px;
background: #aeaeae;
}
.small-thumb {
width: 25%;
height: 300px;
background: #353535;
}
To replicate that grid, you can make flex rows that have flex children that are also flex columns holding your images.
.flex {
display: flex;
}
.col {
flex-direction: column;
flex: 0 0 50%;
}
img {
max-width: 100%;
vertical-align: top;
}
<div class="flex row">
<div class="flex col">
<div class="big">
<img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
</div>
<div class="flex row">
<div class="small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
<div class="small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
</div>
</div>
<div class="flex col">
<div class="flex row">
<div class="small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
<div class="small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
</div>
<div class="big">
<img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
</div>
</div>
Well, that's how you'd do it using regular ol' html/css. But since you want to just have a bunch of elements that automatagically lay out like that, use masonry
$('.masonry').masonry({
itemSelector: '.item',
columnWidth: '.small'
});
body {
margin: 0;
}
.item {
float: left;
}
.big {
width: 50%;
}
.small {
width: 25%;
}
img {
width: 100%;
vertical-align: top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="masonry">
<div class="item big">
<img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
</div>
<div class="item small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
<div class="item small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
<div class="item big">
<img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
</div>
<div class="item small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
<div class="item small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
</div>