so I am not good at Grid so I am stuck here. As you can see in the images there is an extra space in my css grid that I don’t want. How can I do it like the design shown.

HTML

    <section class="timeline">
        <div class="timeline-info">
            <h2>The Timeline</h2>
        </div>
        <div class="timeline-container">
            <div class="one timeline-item">
                <img src="/images/timeline/pioneer.jpg" width="240">
                <div class="timeline-item-content">
                    <h3>Pioneer 0</h3>
                    <time>17 August 1958</time>
                    <p>Pioneer 0 was a failed United States space probe that was designed to go into orbit around the Moon, carrying a television camera, a micrometeorite detector and a magnetometer, as part of the first International Geophysical.</p>
                </div>
            </div>
            <div class="two timeline-item">
                <img src="/images/timeline/luna-24.jpg" width="240" alt="Luna 24" class="timeline-item-image">
                <div class="timeline-item-content">
                    <h3>Luna 24</h3>
                    <time>9 August 1976</time>
                    <p>Luna 24 was an unmanned space mission of the Soviet Union's Luna programme. The last of the Luna series of spacecraft, the mission of the Luna 24 probe was the third Soviet mission to retrieve lunar soil samples from the Earth's moon (the first two sample return missions were Luna 16 and Luna 20). The spacecraft orbital dry mass was 4,800 kg (10,600 lb).</p>
                </div>
            </div>
           ...
    </section>

CSS

.timeline-container {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    grid-auto-flow: dense;
    grid-template-areas:
        "one two"
        "three four"
        "five six";
}
.timeline-item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-top: 6px solid #333333;
    padding: 20px; /* Adjust padding as needed */
    background-color: #222222;
    box-sizing: border-box; /* Ensure padding and border are included in the width and height */
}
.timeline-item-content{
    color: white;
    margin-top: 20px;
}
.timeline-item-content h3{
    font-size: 24pt;
    font-weight: 600;
    margin-bottom: 10px;
}
.timeline-item-content time{
    color: #ccc;
}
.timeline-item-content p{
    margin-top: 10px;
    line-height: 1.5;
}

I was trying to do the design I added but it ended up having extra space.