I have an array of objects called imageList, and I need to achieve a specific pattern using flexbox. How can we utilize flex-grow for the images? https://i.sstatic.net/RHqfK.jpg
I have been able to create this pattern using grid (...pseudo(':nth-child(1)', { gridRowStart: 1, gridRowEnd: 3 }),) but struggling to do so with flexbox. Please assist me in achieving this layout using flexbox.
The current behavior is illustrated here: https://i.sstatic.net/mNxZG.jpg
I have provided the tsx and css files below:
Below is my code App.tsx
import React from "react";
import "./App.css";
const App = () => {
const imageList = [
{
id: "1",
url: "https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
},
{
id: "2",
url: "https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
},
{
id: "3",
url: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80",
},
{
id: "4",
url: "https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80",
},
{
id: "5",
url: "https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
},
{
id: "6",
url: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg",
},
{
id: "7",
url: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg",
},
{
id: "8",
url: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg",
},
];
return (
<div className="mainWrapper">
{imageList.map((image: any, index) => (
<div key={image.id} className="imageWrapper">
<img src={image.url} alt={image.url} width="100px" />
<h4 className="heading">{image.id}</h4>
</div>
))}
</div>
);
};
export default App;
Please find the App.css below:
*{
margin: 60;
padding: 60;
}
.mainWrapper{
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-left: 160px;
margin-right: 160px;
}
.imageWrapper{
position: relative;
flex: 1 0 21%;
height: 200px;
}
img{
min-width: 100%;
height: 100%;
border-radius: 20px;
}
.heading{
position: absolute;
top: 0;
color: white;
}