Using CSS Flex to span multiple columns-CodePudding

I am trying to use CSS Flex to have a second row span the 2nd and 3rd columns only.

I don't want to add it as a separate row below the first row created in column 1.

This is because the content of column 1 is a tall graphic and so the content of columns 2 and 3 do not need to create additional vertical space.

The content of row 2 in column 3 may also vary in height and it would be good to position the content that spans columns two and three below this.

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  border: 2.5px solid blue;
  margin: 5px 5px 5px 5px;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  border: 2.5px solid black;
  margin: 5px 5px 5px 5px;
}

.double_column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 2;
  border: 2.5px solid red;
  margin: 5px 5px 5px 5px;
}

<!---- Header ---->
<header style="padding:0px 0px 0px 0px !important;">
</header>
<!---- Header end ---->
<div class="clear"></div>
<!--content area-->
<div class="project_area">
  <div style="width: 100%;">
    <div class="row">
      row one

      <div class="column" style="width:45%; ">
        column one
      </div>

      <div class="column" style="width:20%;">
        column two

        <div class="row">
          <div class="double_column" style="padding-left:0px;">
            row 2 in column 2 <br /> want this to extend into column three below row 2 of column 3
          </div>
        </div>
      </div>

      <div class="column" style="width:20%;">
        column three
        <div class="row">
          row two in column 3
        </div>
      </div>

    </div>
    <div class="clear"></div>

Thank you

CodePudding user response：

If you want to use flex, you do need one more wrapper. You need to separate the left and right side content. Because flex has no concept of columns and rows (unlike CSS Grid), you essentially have to create two columns with the markup.

The right element is a flex parent and uses align-content and the children use align-self: flex-start so the children elements do not take up the full height of the parent.

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: nowrap;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

.left {
  flex: 0 0 50%;
}

.right {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  flex: 0 0 calc(50% - 5px);
  margin-left: 5px;
}

.column {
  flex: 0 0 50%;
  background: pink;
  align-self: flex-start;
}

.column--extended {
  flex: 0 0 100%;
  background: yellow;
}

<!--content area-->
<div class="project_area">
  <div class="row">
    <div class="left">
      <img src="https://via.placeholder.com/200x800">
    </div>

    <div class="right">
      <div class="column">
        column two
      </div>

      <div class="column">
        <img src="https://via.placeholder.com/200x400">
      </div>

      <div class="column column--extended">
        Extended Row. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.
      </div>
    </div>
  </div>
</div>

GRID EXAMPLE

I commented all of the lines of CSS to explain what they are doing. For a really good tutorial, I always point people starting out with CSS Grid to: https://css-tricks.com/snippets/css/complete-guide-grid/

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.row {
  display: grid;
  /* Sets up the grid to be three columns */
  grid-template-columns: 50% repeat(2, 1fr);
  /* We have two rows - the first is the height of the largest content in the row. The second is the the remainder of the height of the grid parent */
  grid-template-rows: max-content 1fr;
  /* 5px gap between grid elements */
  grid-gap: 5px;
  background: violet;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.column--image {
  /* We want the first column to span across all rows, so we go from line 1 to line 3 (top and bottom */
  grid-row: 1/3;
}

.column--mid {
  /* we only want the height of this element to be its own height */
  height: max-content;
  background: pink;
}

.column--extended {
  /* Sets this up from row line 2 to 3 */
  grid-row: 2/3;
  /* we want to extend this from the left line of the second column to the last line of the columns */
  grid-column: 2/4;
  background: yellow;
  /* we only want the height of this element to be its own height */
  height: max-content;
}

<!--content area-->
<div class="row">
  <div class="column column--image">
    <img src="https://via.placeholder.com/200x500">
  </div>

  <div class="column column--mid">
    Eleifend nec eget. Id massa quis eu vitae elit.
  </div>


  <div class="column column--small-image">
    <img src="https://via.placeholder.com/200x400">
  </div>


  <div class="column column--extended">
    Extended Row. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.
  </div>
</div>