Image to right of 3 elements-CodePudding

I have 3 images using display: flex and flex-direction: column in a <div>

But I want to have a image to the right of those, expanding as big as how big the other images on the left are combined.

I tried to add a div inside the div, but it just went under it, while I wanted it to go right.

.items {
  display: flex;
  flex-direction: column;
  width: 60%;
}

<div >
   <img src="rsc/img/test.png" alt="Join the Discord">
   <img src="rsc/img/test.png" alt="Join the Server">
  <img src="rsc/img/test.png" alt="See our Socials">
  <img src="rsc/img/test2.png" /> /* Image I want right of the others */
</div>

CodePudding user response：

.items {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 60%;
}

.rightimg {
  width: 100%;
}

First three images will be arranged in a row at the left side of the parent element, and the fourth image will be positioned at the right side of the parent element.

CodePudding user response：

Are you looking for something like this ?

.items{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width:100%;
}
.cols {
  display:flex;
  flex-direction:column;
}
img{
  height:100%;
  width: 100%;
}

<div >
  <div >
    <img src="https://picsum.photos/500/300?random=1" alt="Join the Discord">
    <img src="https://picsum.photos/500/300?random=2" alt="Join the Server">
    <img src="https://picsum.photos/500/300?random=3" alt="See our Socials">
  </div>
  <div >
    <img src="https://picsum.photos/500/800?random=4" >
  </div>
</div>

Another way of doing it with only grid

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: 100%;
}

.div1 {
  grid-area: 1 / 1 / 3 / 3;
}

.div2 {
  grid-area: 3 / 1 / 5 / 3;
}

.div3 {
  grid-area: 5 / 1 / 7 / 3;
}

.div4 {
  grid-area: 1 / 3 / 7 / 7;
}

img {
  width: 100%;
  height: 100%;
}

<div >
  <div >
    <img src="https://picsum.photos/500/300?random=1" alt="Join the Discord">
  </div>
  <div >
    <img src="https://picsum.photos/500/300?random=2" alt="Join the Server">
  </div>
  <div >
    <img src="https://picsum.photos/500/300?random=3" alt="See our Socials">
  </div>
  <div >
    <img src="https://picsum.photos/500/900?random=4">
  </div>
</div>

CodePudding user response：

I guess you are trying to display 3 images one below another and last image right side of the 3 images. This code will do. As you can see first div is displayed as a row and two div inside are columns . Adjust height and width as you want.

.items {
  display: flex;
  flex-direction: row;
  
}
.col1 img{
    width:100%;
}

.col1
{
    display:flex;
    flex-direction:column;
    
}
.col2 img
{
    width:100%;
    height:100%;
}

.col2{
    position:relative;
      display:flex;
    flex-direction:column;
}

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>demo</title>
</head>
<body>
<div >
    <div >
   <img src="https://images.pexels.com/photos/4974912/pexels-photo-4974912.jpeg" alt="Join the Discord">
   <img src="https://images.pexels.com/photos/4974912/pexels-photo-4974912.jpeg" alt="Join the Server">
  <img src="https://images.pexels.com/photos/4974912/pexels-photo-4974912.jpeg" alt="See our Socials">
    </div>
   <div >
      <img src="https://images.pexels.com/photos/4974912/pexels-photo-4974912.jpeg" />
  </div>
</div >
    
</body>
</html>

CodePudding user response：

.items{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width:100%;
}
.cols {
  display:flex;
  flex-direction:column;
}
img{
  height:100%;
  width: 100%;
}