I have this code:
div.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
}
div > div {
width: 200px;
background: #ccc;
margin-bottom: 1rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="grid">
<div style="height: 400px">1</div>
<div style="height: 200px">2</div>
<div style="height: 100px">3</div>
<div style="height: 150px">4</div>
<div style="height: 300px">5</div>
<div style="height: 600px">6</div>
</div>
</body>
</html>
I need, that block with number (4 or 5) should be up to block with number 3. Now I have space:
I can't change html structure. Help please resolve this issue.