How do I make a single column on first row and two columns on second row with equal width items-CodePudding

aa bb cc dd ee are part of div groups, All have the same width.

...aa...
..bbcc..
..ddee..

Either with display flex or display grid

CodePudding user response：

<style>

.component-wrapper {
  margin: 15px;
  background-color: red;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.first-row {
  background-color: green;
  height: 100px;
}

.second-row-second-column {
  background-color: orange;
  height: 100px;
}

.second-row-first-column {
  background-color: blue;
  height: 100px;
}



</style>

<div class='component-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='first-row'>
        First Row with One Column
      </div>
    </div>
  </div>
  <div class='row'>
    <div class='column'>
      <div class='second-row-first-column'>
        Second Row First Column
      </div>
    </div>
    <div class='column'>
      <div class='second-row-second-column'>
        Second Row Second Column
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Your Question is very ambigious but according to my perception answer is:

<div  style="display: flex; flex-direction:column">
  <div >
    aa
  </div>
  <div  style="display: flex; flex-direction:row">
    <div >bb</div>
    <div >cc</div>
  </div>
  <div  style="display: flex; flex-direction:row">
    <div >dd</div>
    <div >ee</div>
  </div>
</div>