css Question posted in
Some basic documentation can be found here.

Merge rows in CSS subgrid

I have 2 columns (both a DIV) with each multiple rows (also DIV per row). I made this with css grid and subgrid.

Now I would like to merge the 2nd row with the 3rd row of each column. The 4the row of both columns should be aligned to each other again.

In my example the empty red space of the 2nd row (1st column) should be gone and immediately after the text (Column 1 row 2) the text of Column 1 row 3 should begin. Column 2 row 3 in red would have some empty space to fill the bigger row 2 and row 3 of column 1. The start of the 4th rows are next to each other again.

The HTML is generated by a CMS and I don’t have any control over it. I can only modify with CSS code.

<div class="main">
            <div class="column">
                <div class="row row-blue">Column 1 row 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa vel enim porttitor aliquam vel eget leo. Quisque vitae vulputate tellus.</div>
                <div class="row row-red row2">Column 1 row 2</div>
                <div class="row row-green row3">Column 1 row 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa vel enim porttitor aliquam vel eget leo. Quisque vitae vulputate tellus.</div>
                <div class="row row-yellow">Column 1 row 4</div>
            </div>
            <div class="column">
                <div class="row row-yellow">Column 2 row 1</div>
                <div class="row row-blue row2">Column 2 row 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa vel enim porttitor aliquam vel eget leo. Quisque vitae vulputate tellus.</div>
                <div class="row row-red row3">Column 2 row 3</div>
                <div class="row row-green">Column 2 row 4</div>
            </div>
        </div>

.main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.column {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
}

enter image description here

I searched everywhere for a solution. Normally it should be possible with a ‘grid-row: span 2’ I thought, but then my rows disappear.

Thanks in advance!

Tags:

2

Answers


  1. 0

    You can wrap a div having the class of row around your second and third row and remove the row class of the divs that will now be nested.

    .main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.column {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
}

.row-red {
    background-color:red;
}

.row-blue {
    background-color: blue;
}

.row-green {
    background-color: green;
}

.row-yellow {
    background-color: yellow;
}
    <div class="main">
            <div class="column">
                <div class="row row-blue">Column 1 row 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa vel enim porttitor aliquam vel eget leo. Quisque vitae vulputate tellus.</div>
                <div class="row">
                <div class="row-red row2">Column 1 row 2</div>
                <div class="row-green row3">Column 1 row 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa vel enim porttitor aliquam vel eget leo. Quisque vitae vulputate tellus.</div>
                </div>
                <div class="row row-yellow">Column 1 row 4</div>
            </div>
            <div class="column">
                <div class="row row-yellow">Column 2 row 1</div>
                <div class="row">
                <div class="row-blue row2">Column 2 row 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec massa vel enim porttitor aliquam vel eget leo. Quisque vitae vulputate tellus.</div>
                <div class="row-red row3">Column 2 row 3</div>
                </div>
                <div class="row row-green">Column 2 row 4</div>
            </div>
        </div>
    Login or Signup to reply.
  2. 0

    You need 6 rows:

    .main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
}
.column {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  &:first-child {
    .row3 {
      grid-row: span 2;
    }
  }
  &:last-child {
    .row2 {
      grid-row: span 2;
    }
  }
}

.row-red {
  background-color: red;
}

.row-blue {
  background-color: blue;
}

.row-green {
  background-color: green;
}

.row-yellow {
  background-color: yellow;
}
    <div class="main">
  <div class="column">
    <div class="row row-blue">
      Column 1 row 1 - Lorem ipsum dolor sit amet, consectetur adipiscing
      elit. Cras nec massa vel enim porttitor aliquam vel eget leo. Quisque
      vitae vulputate tellus.
    </div>
    <div class="row row-red row2">Column 1 row 2</div>
    <div class="row row-green row3">
      Column 1 row 3 - Lorem ipsum dolor sit amet, consectetur adipiscing
      elit. Cras nec massa vel enim porttitor aliquam vel eget leo. Quisque
      vitae vulputate tellus.
    </div>
    <div class="row row-yellow">Column 1 row 4</div>
  </div>
  <div class="column">
    <div class="row row-yellow">Column 2 row 1</div>
    <div class="row row-blue row2">
      Column 2 row 2 - Lorem ipsum dolor sit amet, consectetur adipiscing
      elit. Cras nec massa vel enim porttitor aliquam vel eget leo. Quisque
      vitae vulputate tellus.
    </div>
    <div class="row row-red row3">Column 2 row 3</div>
    <div class="row row-green">Column 2 row 4</div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search