Grid layout using grid-column and grid-row - html

Question

I am using the grid rows and column. I am getting the issue at the last element. I need the second row with equal height and width. So I tried below code.
expected output is
I am getting the output
.content {
display: grid;
margin: 0 auto;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
}
.content div {
background-color: #333;
padding: 30px;
color: #fff;
}
.one {
grid-column: 1/4;
grid-row: 1/3
}
.two {
grid-column: 4/6;
grid-row: 1/3;
}
.three {
grid-column: 1/3;
grid-row: 3/5
}
.four {
grid-column: 3/5;
grid-row: 3/5;
}
.five {
grid-column: 5/6;
grid-row: 3/5;
}
<div class="content">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>

Answer 1

You used the number 5 which make it difficult to divide by 3. Use 15 for example and you can easily divide it by 3 and for the first row you will have 9 + 6 instead of 3 + 2
.content {
display: grid;
margin: 0 auto;
grid-template-columns: repeat(15, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
}
.content div {
background-color: #333;
padding: 30px;
color: #fff;
}
.one {
grid-column: 1/10;
grid-row: 1/3
}
.two {
grid-column: 10/16;
grid-row: 1/3;
}
.three {
grid-column: 1/6;
grid-row: 3/5
}
.four {
grid-column: 6/11;
grid-row: 3/5;
}
.five {
grid-column: 11/16;
grid-row: 3/5;
}
<div class="content">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
UPDATE
As per the OP comments, this is the correct output needed:
.content {
display: grid;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
}
.content div {
background-color: #333;
padding: 30px;
color: #fff;
}
.one {
grid-column: 1/3;
grid-row: 1/3
}
.two {
grid-column: 3/4;
grid-row: 1/3;
}
.three {
grid-column: 1/2;
grid-row: 3/5
}
.four {
grid-column: 2/3;
grid-row: 3/5;
}
.five {
grid-column: 3/4;
grid-row: 3/5;
}
<div class="content">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>