CSS Grid column based flow, but equal height per individual row

EDIT: Before you link this, close and tell me the question is the same. Please understand I do NOT want equal height for ALL rows. I want EQUAL HEIGHT for EACH INDIVIDUAL ROW BUT they are not ordered
1 2
3 4

but
1 3
2 4

instead. So this Different. Don't close after reading just the headline please?

I understand that the css grid default is to have same height columns per row. But that only works as long you have a row-based flow.

What I am trying to build: A 2-Col layout, which breaks to a 1-col layout on a certain viewport. In that case, the entire content of the first row should appear before the content of the second one.
Still, as long as 2 columns exist, both elements per row should have the same height.
Also, also the number of rows and its content varies, but as long as there are 2 columns, both rows should have the same height (per individual line), as soon as there is only 1 column, each row takes up as much space as it needs.

In this codepen, I want B1 to match A1, B2 to match A2, etc.. and of course generic, since the content varies and so does the amount of rows. Also, they do not need to have the same amount of entries left/right.

This is pretty much the desired behaviour

 <div class="grid">
  <div class="left-side sub">
    <div class="A" style="height: 100px">A1</div>
    <div class="A" style="height: 150px">A2</div>
    <div class="A" style="height: 50px">A3</div>
  </div>
  <div class="right-side sub">
    <div class="B">B1</div>
    <div class="B">B2</div>
    <div class="B">B3</div>
  </div>
</div>

.A {
  background-color: dodgerblue;
  margin: 10px 0;
  grid-column: 1;
}

.B {
  background-color: red;
  margin: 10px 0;
}

.left-side {
}
.right-side {
}

.sub {
  /* display: contents; */
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2%;
  row-gap: 50px;
}
@media screen and (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

1 answer

  • answered 2022-01-21 10:48 hossein vatankhah

    you can:

    <div class="grid">
     <div class="A1" style="height: 100px">A1</div>
     <div class="A2" style="height: 150px">A2</div>
     <div class="A3" style="height: 50px">A3</div>
     <div class="B1">B1</div>
     <div class="B2">B2</div>
     <div class="B3">B3</div>
    </div>
    
    
        .grid {
        display: grid;
        grid-template-areas:
            "A1 B1"
            "A2 B2"
            "A3 B3";
        gap: 10px;
        grid-template-columns: repeat(2, 50%);
        grid-template-rows: repeat(3, auto);
        grid-auto-rows: 1fr;
        inline-size: 500px;
    }
    
    .grid > * {
        background-color: rgba(111,41,97,.4);
        border-radius: 5px;
        padding: 10px;
    }
    
    .A1, .A2, .A3 {
        margin: 10px 0;
        background-color: dodgerblue;
    }
    
    .B1, .B2, .B3 {
        margin: 10px 0;
        background-color: red;
    }
    .A1 {
            grid-area: A1;
    }
    .A2 {
            grid-area: A2;
    }
    .A3 {
            grid-area: A3;
    }
    .B1 {
            grid-area: B1;
    }
    .B2 {
            grid-area: B2;
    }
    .B3 {
            grid-area: B3;
    }
    
    @media screen and (max-width: 600px) {
            .grid {
            grid-auto-rows: 1fr;
            grid-template-rows: repeat(6, 1fr);
            grid-template-areas:
            "A1 A1"    
            "B1 B1"
            "A2 A2"    
            "B2 B2"
            "A3 A3"
            "B3 B3";
            }
    }
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum