How to align grid items vertically using display:grid and fill all vertical empty space? [duplicate] - html

Question

This question already has answers here:
How can I make a div span multiple rows and columns in a grid?
(3 answers)
Closed 1 year ago.
I use display:grid not flex to display some divs.
Here's what my page looks like:
And here is how I would like it to look:
And here's the code:
.container {
display: grid;
grid-template-columns: 1.5fr 2fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
gap: 40px 40px;
grid-auto-flow: row dense;
justify-items: stretch;
align-items: stretch;
grid-template-areas: "left1 center-div right1" "left1 center-div right2" "left2 center-div right3";
width: 100%;
height: 100%;
}
.left1 {
grid-area: left1;
}
.left2 {
grid-area: left2;
}
.center-div {
grid-area: center-div;
}
.right1 {
grid-area: right1;
}
.right2 {
grid-area: right2;
}
.right3 {
grid-area: right3;
}
<div class="container owl-carousel owl-theme">
<div class="grid-item left1">
left image 1
</div>
<div class="grid-item left2">
left image 2
</div>
<div class="grid-item center-div">
center image
</div>
<div class="grid-item right1">
right image 1
</div>
<div class="grid-item right2">
right image 2
</div>
<div class="grid-item right3">
right image 3
</div>
</div>
In short, I want to bring the divs closer so that they appear as they are in the second photo

Answer 1

Using CSS Grid
Following demo shows how you can achieve the desired layout using just the grid layout.
Its a 6 x 3 grid where items on the left span 3 rows each and the items on the right span 2 rows each. The item in the center spans all 6 rows.
Each grid items is adjusted in its place using the grid-row and grid-column properties.
The trick to achieving this layout is having more rows than columns.
.container {
display: grid;
grid-template-columns: 1.5fr 2fr 1fr;
grid-template-rows: repeat(6, 1fr);
grid-gap: 30px;
height: 100vh;
}
.grid-item {
background: #eee;
width: 100%;
}
.center {
grid-row: 1 / span 6;
grid-column: 2 / span 1;
}
.left1 {
grid-row: 1 / span 3;
grid-column: 1 / span 1;
}
.left2 {
grid-row: 4 / span 3;
grid-column: 1 / span 1;
}
.right1,
.right2,
.right3 {
grid-column: 3 / span 1;
}
.right1 { grid-row: 1 / span 2; }
.right2 { grid-row: 3 / span 2; }
.right3 { grid-row: 5 / span 2; }
<div class="container">
<div class="grid-item left1">left1</div>
<div class="grid-item left2">left2</div>
<div class="grid-item center">center</div>
<div class="grid-item right1">right1</div>
<div class="grid-item right2">right2</div>
<div class="grid-item right3">right3</div>
</div>
Using CSS Grid along with Flexbox
Another option is to have a 1 x 3 grid and make each grid column a flex container.
You will need to change the structure of the HTML if you use this approach.
:root {
--spacing: 30px;
}
.container {
display: grid;
grid-template-columns: 1.5fr 2fr 1fr;
grid-gap: var(--spacing);
height: 100vh;
}
.grid-item {
display: flex;
}
.grid-item div {
background: #eee;
flex-basis: 100%;
}
.col-1,
.col-3 {
flex-direction: column;
justify-content: space-between;
}
.margin-bottom {
margin-bottom: var(--spacing);
}
<div class="container">
<div class="grid-item col-1">
<div class="margin-bottom">left1</div>
<div>left2</div>
</div>
<div class="grid-item col-2">
<div>center</div>
</div>
<div class="grid-item col-3">
<div class="margin-bottom">right1</div>
<div class="margin-bottom">right2</div>
<div>right3</div>
</div>
</div>