CODEWITHSUNDEEP
htmlcssflexbox
mark Smith
mark Smith

Reputation: 43

Making flex items responsive

I want to make this items responsive, the problem I'm having is that once the items get to 300px, the fourth item drops down and it becomes 3 items at the top and the fourth item is alone at the bottom with full width. I want them to always be 4, 2 x 2 and 1 x 4 as decrease the screen size.

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: 300px;
  flex-grow: 2;
  height: 40rem;
  color: #fff;
  background-color: black;
}
<div class="wrapper">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

Upvotes: 0

Views: 240

Answers (1)

Anton
Anton

Reputation: 8508

Example what you want with display: grid;

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  grid-template-rows: repeat(2, minmax(200px, 1fr));
  gap: 10px;
}

.item {
  color: #fff;
  background-color: orange;
}

@media screen and (max-width: 580px) {
  .wrapper {
    grid-template-columns: auto;
    grid-template-rows: repeat(4, minmax(200px, 1fr));
  }
}
@media screen and (min-width: 1280px) {
  .wrapper {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
  }
}
<div class="wrapper">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
    </div>

Upvotes: 1

Related Questions