CODEWITHSUNDEEP
htmlcss
U-Dev
U-Dev

Reputation: 1387

Need to make row-column-row using css flexbox

I want to make a row-column-row layout using css flexbox, here's the code:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2%;
}

.box {
  color: white;
  background: royalblue;
  min-height: 100px;
  min-width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
}

.b1 {
  flex: 1 0 80%;
}

.b2 {
  flex: 1 1 auto;
}

.b3 {
  flex: 1 0 100%;
}
<div class="container">
  <div class="box b1">1</div>
  <div class="box b2">2</div>
  <div class="box b3">3</div>
</div>

This is what I want:

enter image description here

And on mobile I want something like this:

enter image description here

But as you can see in the code, the column is not growing vertically and I cannot even use margins or gaps in between the divs.

Any suggestions will be appreciated. CSS-Grid solutions are also welcome.

Upvotes: 1

Views: 47

Answers (1)

connexo
connexo

Reputation: 56720

A grid-based approach using a media query:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "b1 b2"
    "b3 b2";
  gap: 0.2%;
}

@media screen and (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "b1"
      "b2"
      "b3";
  }
}

.box {
  color: white;
  background: royalblue;
  min-height: 100px;
  min-width: 100px;
  border: 1px solid;
}

.b1 {
  grid-area: b1;
}

.b2 {
  grid-area: b2;
}

.b3 {
  grid-area: b3;
}
<div class="container">
  <div class="box b1">1</div>
  <div class="box b2">2</div>
  <div class="box b3">3</div>
</div>

Upvotes: 1

Related Questions