Grid and flex layout for a card container - css

Question

I am trying make
I tried to do with display: flex but I'm not having success and I can't make it responsive and with grid area the same way.,
code:
const Grid = styled.div`
display: grid;
grid-template-columns: 40wh 1fr;
background: red;
& div:nth-child(1) {
grid-area: 1 / 1 / 5 / 1;
background: yellow;
}
`;
export default function App() {
return (
<div className="App">
<Grid>
<div>a</div>
<div>b</div>
<div>b</div>
</Grid>
</div>
);
}
Could someone help me how would I achieve this with flex or grid system?
example:
https://codesandbox.io/s/withered-river-d6twt

Answer 1

Grid Solution
There are many ways to accomplish this. I like using grid-template-areas to define an explicit grid and place my items exactly where I want them. From the code below, specifically the value for grid-template-areas, you can see that a spans both row 1 and row 2.
Note: you have a CSS error:
grid-template-columns: 40wh 1fr; /* <-- wh is not a valid unit */
I changed that line to:
grid-template-columns: 40vw 1fr 1fr;
Here's the full code.
.grid {
display: grid;
grid-template-areas:
"a b c"
"a d e";
grid-gap: 4px;
grid-template-columns: 40vw 1fr 1fr;
grid-auto-rows: 100px;
}
.grid > * {
background-color: #333;
color: white;
position: relative;
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
.e { grid-area: e; }
.grid > * > span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="grid">
<div class="a"><span>a</span></div>
<div class="b"><span>b</span></div>
<div class="c"><span>c</span></div>
<div class="d"><span>d</span></div>
<div class="e"><span>e</span></div>
</div>
jsFiddle
Flex Solution
You'll notice the gaps in the following code are a bit of a hack compared to Grid. With Grid we can express the gaps using grip-gap; Flex gives us no such tool.
.flex {
display: inline-flex;
}
.left,
.right {
flex: 1;
display: flex;
}
.right {
flex-wrap: wrap;
}
.right > img {
width: 50%;
padding-left: 4px;
}
.right > img:nth-child(1),
.right > img:nth-child(2) {
padding-bottom: 2px;
}
.right > img:nth-child(3),
.right > img:nth-child(4) {
padding-top: 2px;
}
img {
max-width: 100%;
height: auto;
}
* {
box-sizing: border-box;
}
<div class="flex">
<div class="left">
<img src="http://placekitten.com/500/600" alt="">
</div>
<div class="right">
<img src="http://placekitten.com/100/150" alt="">
<img src="http://placekitten.com/100/150" alt="">
<img src="http://placekitten.com/100/150" alt="">
<img src="http://placekitten.com/100/150" alt="">
</div>
</div>
jsFiddle