CODEWITHSUNDEEP
cssflexboxcss-grid
Vladimir Kyatipov
Vladimir Kyatipov

Reputation: 736

css grid help making columns 2 on 1

i am stuck with css problem. I have elementor blog template i need to make on 1 / 2 / 1 columns. See attach on photo. I made with :nth-child(3) & :nth-child(4) to be 50%, but i can not make them on same line.

I find other way to make it with: display: flex; flex-wrap: wrap; but they are space on right side i cannot remove. Please help for resolve this problem :)

enter image description hereenter image description here

Upvotes: 0

Views: 70

Answers (1)

Aing Macan
Aing Macan

Reputation: 187

is this what you want?

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 10px;
}
.grid__item {
    background-color: lightblue;
    padding: 10vh 0;
    text-align: center;
}

.grid__item:nth-child(1) {
    grid-row: 1/2;
    grid-column: 2/4;
}

.grid__item:nth-child(2) {
    grid-column: 2/3;
}
.grid__item:nth-child(4) {
    grid-column: 2/4;
}
<section class="grid">
    <div class="grid__item">1</div>
    <div class="grid__item">2</div>
    <div class="grid__item">3</div>
    <div class="grid__item">4</div>
</section>

Upvotes: 2

Related Questions