div {
      border: 1px solid tomato;
    }
    div.clsFlex {
      display:flex;
      width:150px;
      height:100px;
    }
    div div {
      width:48px;
      height:48px;
      border: 1px solid black;
    }
    div.clsElastic {
      display: flex;
      min-width:400px;
      height:50px;
    } div.clsElastic > div:nth-child(1) {
      width:400px;
      background-color: yellowgreen;
    } div.clsElastic > div:nth-child(2) {
      width:300px;
      ;background-color: aqua;
    }

  <div class="clsFlex">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
  </div>
  display:flex; flex-flow:row wrap; width:300px; height:200px;
  <div class="clsFlex" style="flex-flow:row wrap;">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
  </div>
  display:flex; flex-flow:row-reverse wrap; width:300px; height:200px;
  <div class="clsFlex" style="flex-flow:row-reverse wrap;">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
  </div>
  display:flex; flex-flow:row nowrap; width:300px; height:200px;
  <div class="clsFlex" style="flex-flow:row nowrap;">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
  </div>
  display:flex; flex-flow:row wrap-reverse; width:300px; height:200px;
  <div class="clsFlex" style="flex-flow:row wrap-reverse;">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
  </div>
  <b>flex</b>
  <div class="clsElastic">
    <div style="flex-basis: 60%;">flex-basis: 60%;</div>
    <div style="flex-basis: 40%;">flex-basis: 40%;</div>
  </div>
  <div class="clsElastic">
    <div style="flex-basis: 70%;">flex-basis: 70%;</div>
    <div style="flex-basis: 30%;">flex-basis: 30%;</div>
  </div>
  <div class="clsElastic">
    <div style="flex: 1 1 auto;">flex: 1 1 auto</div>
    <div style="flex: 0 0 auto;">flex: 0 0 auto</div>
  </div>
  <div class="clsElastic">
    <div style="flex: 1 0 auto;">flex: 1 0 auto;</div>
    <div style="flex: 0 1 auto;">flex: 0 1 auto;</div>
  </div>
  <div class="clsElastic">
    <div style="flex: 0 1 auto;">flex: 0 1 auto;</div>
    <div style="flex: 1 0 auto;">flex: 1 0 auto;</div>
  </div>
  <div class="clsElastic">
    <div style="flex: 1 1 auto;">flex: 1 1 auto;</div>
    <div style="flex: 1 1 auto;">flex: 1 1 auto;</div>
  </div>

Header 1,1 / 3,-

Side 1,2 / -,-

Content 2,2 / -,-

Footer 1,3 / 3,-

Header 1,1 / 3,-

Side 1,2 / -,-

Content 2,2 / -,-

Footer 1,3 / 3,-

Header S,S / E,-

Side S,SC / -,-

Content SE,SC / -,-

Footer S,CE / E,-

Header 1,1 / 3,-

Side 1,2 / -,-

Content 2,2 / -,-

Footer 1,3 / 3,-

    .clsGrid1 {
      display: grid;
      grid-template-rows: 30px minmax(60px,max-content) 30px;
      grid-template-columns: 150px 1fr;
      margin-bottom: 8px;
    }
    .clsHeader1 {
      grid-row-start: 1;
      grid-column-start: 1; grid-column-end: 3;
    }
    .clsSide1 {
      grid-row-start: 2;
      grid-column-start: 1;
    }
    .clsContent1 {
      grid-row-start: 2;
      grid-column-start: 2;
    }
    .clsFooter1 {
      grid-row-start: 3;
      grid-column-start: 1; grid-column-end: 3;
    }
    .clsHeader2 {
      grid-row: 1;
      grid-column: 1 / 3;
    }
    .clsSide2 {
      grid-row: 2;
      grid-column: 1;
    }
    .clsContent2 {
      grid-area: 2 / 2 / 2 / 2;
    }
    .clsFooter2 {
      grid-area: 3 / 1 / 3 / 3;
    }
    .clsGrid3 {
      display: grid;
      grid-template-rows: [S] 30px [SC] minmax(60px,max-content) [CE] 30px [E];
      grid-template-columns: [S] 150px [SE] 1fr [E];
      margin-bottom: 8px;
    }
    .clsHeader3 {
      grid-row-start: S;
      grid-column-start: S; grid-column-end: E;
    }
    .clsSide3 {
      grid-row-start: SC;
      grid-column-start: S;
    }
    .clsContent3 {
      grid-row-start: SC;
      grid-column-start: SE;
    }
    .clsFooter3 {
      grid-row-start: CE;
      grid-column-start: S; grid-column-end: E;
    }

  <div class="clsGrid1">
    <div class="clsHeader1">Header 1,1 / 3,-</div>
    <div class="clsSide1">Side 1,2 / -,-</div>
    <div class="clsContent1">Content 2,2 / -,-<img src="z.png"></div>
    <div class="clsFooter1">Footer 1,3 / 3,-</div>
  </div>
  <div class="clsGrid1">
    <div class="clsHeader2">Header 1,1 / 3,-</div>
    <div class="clsSide2">Side 1,2 / -,-</div>
    <div class="clsContent2">Content 2,2 / -,-<img src="z.png"></div>
    <div class="clsFooter2">Footer 1,3 / 3,-</div>
  </div>
  <div class="clsGrid3">
    <div class="clsHeader3">Header S,S / E,-</div>
    <div class="clsSide3">Side S,SC / -,-</div>
    <div class="clsContent3">Content SE,SC / -,-<img src="z.png"></div>
    <div class="clsFooter3">Footer S,CE / E,-</div>
  </div>
  <div class="clsGrid1" style="gap:10px 5px; border-style:none">
    <div class="clsHeader1">Header 1,1 / 3,-</div>
    <div class="clsSide1">Side 1,2 / -,-</div>
    <div class="clsContent1">Content 2,2 / -,-<img src="z.png"></div>
    <div class="clsFooter1">Footer 1,3 / 3,-</div>
  </div>