CODEWITHSUNDEEP
htmlcss
Mr No
Mr No

Reputation: 143

CSS: How can I make the display 1, 2, or 4 columns but never 3 columns?

How can I use css to make sure the following code can display as 1, 2, or 4 columns but never as 3 columns?

.container {
    display: flex;
    flex-wrap: wrap;
    border: 3px solid rgb(0, 0, 0);
}

.panel {
    height: 100px;
    width: 100px;
    border: 3px solid rgb(255, 0, 0);
    margin: 10px 0px 0px 10px;
}
<div class="container">
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
</div>

Upvotes: 0

Views: 737

Answers (1)

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

So it's all about the width since you are using flex-box. if you want an item to take the entire row give the container width of 100% and if you want 2 items next to each other give it width:50% if you want 4 items then make sure to give it 25% of the width.

I made this responsive example I used the names bootstrap uses to make it easier to understand in case you are using bootstrap.

Note that you should work inside the div with class wrap.

.container {
  display: flex;
  flex-wrap: wrap;
  outline: 3px solid rgb(0, 0, 0);
}

.panel {
  height: 100px;
  outline: 2px solid rgb(255, 0, 0);
  background-color: green;
}

.wrap {
  margin: 0 1rem;
  height: 100%;
  background-color: blueviolet;
  color: white;
}

.col-12 {
  width: 100%;
}

@media (min-width: 768px) {
  .col-mid-6 {
    width: 50%;
  }
}

@media (min-width: 1200px) {
  .col-xl-4 {
    width: 25%;
  }
}
<div class="container">
  <div class="panel col-12 col-mid-6 col-xl-4">
    <div class="wrap">div1</div>
  </div>
  <div class="panel col-12 col-mid-6 col-xl-4">
    <div class="wrap">div2</div>
  </div>
  <div class="panel col-12 col-mid-6 col-xl-4">
    <div class="wrap">div3</div>
  </div>
  <div class="panel col-12 col-mid-6 col-xl-4">
    <div class="wrap">div4</div>
  </div>
</div>

if that didn't help let me know.

Upvotes: 2

Related Questions