html - posible : custom flex card

Question

.flex-container{
   display: flex;
   /* flex-flow: row; */
   flex-flow: column wrap;
   border: 1px solid black;
   text-align: center;
   height: 200px;
   width: 50%;
}

<div class="flex-container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box8">8</div>

question from:https://stackoverflow.com/questions/65932606/posible-custom-flex-card

Answer 1

I have a solution using display: grid.

Achieving the required layout with the below two UI states

The layout is created by having a major container grid-container with three sections leftSide, topSide and bottomSide. Inside the latter, there is a secondary container which is also a grid container with the most important property being:

grid-auto-flow: columns;

Finally, we have a media query in which we have a two-column grid.

The complete code is:

   .grid-container {
  display: grid;
  grid-template-areas:
    'leftSide topSide'
    'leftSide bottomSide';
  grid-template-columns: 1fr 3fr; /* change proportions here */
  grid-template-rows: auto auto;
  height: 100vh;
  width: 100%;
}

.bottom-container {
  grid-area: bottomSide;
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
}


@media (max-width: 720px) {
  .bottom-container {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: initial;
  }
}

.box {
  display: block;
  border: 1px solid red;
  padding: 10px;
  text-align: center;
}

.box1 {
  grid-area: leftSide;
}

.box2 {
  grid-area: topSide;
}

<div class="grid-container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="bottom-container">
      <div class="box">3</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">8</div>
    </div>
  </div>